Question

Safari中的函数(createContextualFragment)存在问题。

我们需要在正文中添加一些内容，因此我们使用这行代码。

代码：

document.getElementsByTagName('body')[0].insertBefore(document.createRange().createContextualFragment("<div></div><script src="LINK_SOURCE"></script>"), null);

这行代码适用于Chrome和Firefox，但我们在Safari中遇到了一些createContextualFragment问题。

Safari出错：

createContextualFragment - asyncronousDocumentWrite2.html：28：115NotSupportedError：DOM异常 9：实现不支持所请求的对象类型或操作

Answer 1

我意识到我的答案迟到了，但我最近遇到了类似的情况。

我找到了什么

根据https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment#Browser_compatibility Safari 9.0或9.1不支持Range.createContextualFragment（）。它在Safari 10中运行良好。

你能做什么？

由于Safari不支持createContextualFragment，我们可以将创建文档片段的责任委托给jQuery。以下说明了两个选项，具体取决于您使用的jQuery版本：

jQuery 1.8或更新版使用ParseHTML
document.getElementsByTagName('body')[0].insertBefore($.parseHTML("<div></div><script src='http://google.ca'></script>"), null);
否则让jQuery弄明白要做什么 document.getElementsByTagName('body')[0].insertBefore($("<div></div> <script src='http://google.ca'></script>"), null);

Answer 2

我发现设置 range.selectNodeContents(document.createElement('div')); 可以解决本文中间接指出的问题https://grrr.tech/posts/create-dom-node-from-html-string/#range。
我的示例用法：

document.querySelectorAll('.container').forEach((el) => {
  const range = document.createRange();
  range.selectNodeContents(el);
  range.deleteContents();
  range.selectNodeContents(document.createElement('div')); // fix for safari
  el.appendChild(range.createContextualFragment(htmlContent));
});

CreateContextualFragment在Safari中不起作用

2 个答案: