如何修复未捕获的 TypeError：无法读取 null 的属性“outerHTML”
Posted
技术标签:
【中文标题】如何修复未捕获的 TypeError：无法读取 null 的属性“outerHTML”【英文标题】：How to fix uncaught TypeError: Cannot read property 'outerHTML' of null 【发布时间】：2018-03-22 22:46:00 【问题描述】：我有一个 Bootstrap 弹出框脚本，当我单击该按钮时，它会在 Java 控制台中返回一个错误。所以按钮显示得很好，当我点击它时，我可以看到弹出框链接到的 html 文件的内容，但它会触发一个错误，在控制台中出现两次：
未捕获的类型错误：无法读取 null 的属性“outerHTML”。
我尝试将outerHTML 替换为innerHTML，但这没有帮助。
任何想法如何解决这个问题？
<button type="button" data-templatefile="Text.html" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" style='float:right;margin-right:50px'>
My popover button
</button>
<script>
function loadContent(templateFile)
return $('<div>').load(templateFile, function(html)
parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");
return doc.querySelector('h1').outerHTML + doc.querySelector('body').outerHTML;
)
$('[data-toggle="popover"]').popover(
html : true,
content : function()
return loadContent($(this).data('templatefile'))
);
</script>
【问题讨论】：
“我已经尝试过...innerHTML”。为什么？错误消息明确指出，doc.querySelector('h1') 是 null。
请同时提供模板文件
你想象 loadContent返回什么？
并且，.popover 的 content 参数应该是一个函数吗？
the error message clearly states, that doc.querySelector('h1') is null 不，它没有 - 为什么doc.querySelector('body') 不能是空的：p
【参考方案1】：
实际上，我已经通过在包含弹出框内容的链接 html 中添加一个来修复它。现在是这样的：
<body><h1>my text here</h1></body>
当我单击弹出框时，Java 控制台中不再出现错误。谢谢
【讨论】：
以上是关于如何修复未捕获的 TypeError：无法读取 null 的属性“outerHTML”的主要内容，如果未能解决你的问题，请参考以下文章
如何使用自定义错误消息捕获“TypeError：无法读取未定义的属性（读取'0'）”？
如何修复'TypeError：无法读取 Javascript 中未定义的属性'标题'
如何修复 JavaScript 中的“TypeError：无法读取未定义的属性'map'”？
如何修复“TypeError：无法读取未定义的属性 'toString'” |不和谐.js
如何修复 TypeError：在使用 bcryptjs 对 GraphQL 突变进行哈希密码期间无法读取未定义的属性“哈希”？