Question

我们正在编写一些推荐程序代码，我们的推荐人会在他们想要我们的徽标显示的页面上放置一个javascript文件。有点像...

<script type="text/javascript" src="https://www.oursite.com/refer.js.asp?var=1"></script>

在asp脚本中它只写出了一些像......

的代码

document.write('<a href="oursite.com?referrer=somereferrer"><img src="logo.png"></a>');

虽然在测试页面中运行时这是有效的，但我确实发现了出现此错误的情况 -

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

当我尝试通过实用程序页面动态生成脚本并将其附加到页面上的div时，我收到了该错误。由于页面已经加载，我不能在脚本文件中使用document.write。所以，我想知道的是，有没有一种方法可以确定脚本文件在DOM中的位置，使用类似的东西将链接和图像放置在正确的位置......

var a = document.createElement('a');
var img = document.createElement('img');
img.src = img_url;
a.appendChild(img);
a.href = "http://www.oursite.com";
document.body.appendChild(a);

在这种情况下，我将a元素直接附加到正文。我需要做的是将它附加到包含脚本文件的任何元素。那可能吗？如果是这样，怎么样？感谢。

Answer 1

您可以将id添加到script元素，并在脚本中使用id：

＆＃13;

<script id="a1" type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
  var img = document.createElement('img');
  img.src = 'https://dummyimage.com/600x400/000/fff';
  document.getElementById('a1').nextSibling.parentNode.insertBefore(img, document.getElementById('a1').nextSibling);
});
</script>

＆＃13;

Answer 2

您可以先尝试查找文档中的所有脚本标记，通过src匹配找到您的标记，然后附加到其父目录。

示例：

var scriptTags = document.getElementsByTagName('script');
for(var i=0; i<scriptTags.length; i++) {
  if(scriptTags[i].src === "your script's href") {
    var parent = scriptTags[i].parentNode;
    //append your image/link to parent via parent.insertBefore(YOURNODE, scriptTags[i])
    break;
  }
}

如果src url不是静态的，你还可以使用正则表达式来匹配你的src url

如何定位javascript文件位于dom中的元素

2 个答案: