在Safari浏览器中CreateContextualFragment无法正常工作。

Question

我们在Safari浏览器中遇到了一个关于(createContextualFragment) 函数的问题。

我们需要向body添加一些内容，所以我们使用了这行代码。

代码:

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 Exception 9：实现不支持请求的对象类型或操作。

- Swarup

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版本：

1. jQuery 1.8或更高版本，使用ParseHTML
   document.getElementsByTagName('body')[0].insertBefore($.parseHTML("<div></div><script src='http://google.ca'></script>"), null);

2. 否则，让jQuery自行决定如何处理
   document.getElementsByTagName('body')[0].insertBefore($("<div></div> <script src='http://google.ca'></script>"), null);

- dustfinger

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));
});

- Filip Kováč