我想在网页中动态地包括一个脚本标签,但我无法控制它的src,所以src="source.js"可能看起来像这样。

document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')

一般来说

<script type="text/javascript" src="source.js"></script>

在头部工作很好,但有没有其他方法,我可以动态添加source.js使用innerHTML之类的东西?

我已经试过了


当前回答

这是我的工作。

你可以检查一下。

var script_tag = document.createElement('script'); script_tag.setAttribute(“src”、“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”); document.head.appendChild (script_tag); 窗口。Onload = function() { if (window.jQuery) { //加载jQuery 警报(“在头部添加脚本标签!”); }其他{ //不加载jQuery 警告(“没有在头部添加脚本标签”); } }

其他回答

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

要做到这一点,唯一的方法是替换文档。使用您自己的函数编写,该函数将在页面底部附加元素。jQuery非常简单:

document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}

如果你有html来文档。像问题样例那样写入块,你需要缓冲htmlToWrite段。也许是这样的:

document.write = (function() {
  var buffer = "";
  var timer;
  return function(htmlPieceToWrite) {
    buffer += htmlPieceToWrite;
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(buffer).appendTo('body');
      buffer = "";
    }, 0)
  }
})()

你可以像这样使用document.createElement()函数:

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

window.addEventListener("load", init); const loadScript = async (url) => { const response = await fetch(url); const script = await response.text(); eval(script); } function init() { const wistiaVideo = document.querySelector(".wistia_embed"); if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) { let lazyVideoObserver = new IntersectionObserver(function (entries, observer) { entries.forEach(function (entry) { if (entry.isIntersecting) { setTimeout(() => loadScript("//fast.wistia.com/assets/external/E-v1.js"), 1000); lazyVideoObserver.unobserve(entry.target); console.log("E-v1.js script loaded from fast.wistia.com"); } }); }); lazyVideoObserver.observe(wistiaVideo); } } <div style="height: 150vh; background-color: #f7f7f7;"></div> <h1>Wistia Video!</h1> <div class="wistia_embed wistia_async_29b0fbf547" style="width:640px;height:360px;">&nbsp;</div> <h1>Video Ended!</h1>

有多种方法可以包含动态javascript, 我在很多项目中都使用这个。

var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

你可以调用create一个通用函数,它可以帮助你根据需要加载尽可能多的javascript文件。这里有一个完整的教程。

正确地插入动态Javascript