blocks|key|229556|text|var+my_awesome_script+=+document.createElement('script');

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

document.head.appendChild(my_awesome_script);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|229557|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var my_awesome_script = document.createElement('script');

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

document.head.appendChild(my_awesome_script);
</code></pre>


blocks|key|229565|text|您可以像这样使用document.createElement()函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|229566|function+addScript(+src+)+{
++var+s+=+document.createElement(+'script'+);
++s.setAttribute(+'src',+src+);
++document.body.appendChild(+s+);
}|code-block|syntax|javascript|229567|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/document.createElement^0|8|O|8|O|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/DOM/document.createElement" rel="noreferrer"><code>document.createElement()</code></a> function like this:</p>

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


blocks|key|447635|text|有一个onload函数，可以在脚本成功加载后调用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|447636|function+addScript(+src,+callback+)+{
++var+s+=+document.createElement(+'script'+);
++s.setAttribute(+'src',+src+);
++s.onload=callback;
++document.body.appendChild(+s+);
}|code-block|syntax|javascript|447637|entityMap^0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>There is the <code>onload</code> function, that could be called when the script has loaded successfully:</p>
<pre><code>function addScript( src, callback ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}
</code></pre>


blocks|key|229617|text|我写的一个很好的小脚本，用来加载多个脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|229618|function+scriptLoader(scripts,+callback)+{

++++var+count+=+scripts.length;

++++function+urlCallback(url)+{
++++++++return+function+()+{
++++++++++++console.log(url+%2B+'+was+loaded+('+%2B+--count+%2B+'+more+scripts+remaining).');
++++++++++++if+(count+<+1)+{
++++++++++++++++callback();
++++++++++++}
++++++++};
++++}

++++function+loadScript(url)+{
++++++++var+s+=+document.createElement('script');
++++++++s.setAttribute('src',+url);
++++++++s.onload+=+urlCallback(url);
++++++++document.head.appendChild(s);
++++}

++++for+(var+script+of+scripts)+{
++++++++loadScript(script);
++++}
};|code-block|syntax|javascript|229619|用法：|229620|scriptLoader(['a.js','b.js'],+function()+{
++++//+use+code+from+a.js+or+b.js
});|229621|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>a nice little script I wrote to load multiple scripts:</p>

<pre><code>function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count &lt; 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};
</code></pre>

<p>usage:</p>

<pre><code>scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});
</code></pre>


blocks|key|447727|text|您可以尝试下面的代码片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447728|function+addScript(attribute,+text,+callback)+{
++++var+s+=+document.createElement('script');
++++for+(var+attr+in+attribute)+{
++++++++s.setAttribute(attr,+attribute[attr]+?+attribute[attr]+:+null)
++++}
++++s.innerHTML+=+text;
++++s.onload+=+callback;
++++document.body.appendChild(s);
}

addScript({
++++src:+'https://www.google.com',
++++type:+'text/javascript',
++++async:+null
},+'<div>innerHTML</div>',+function(){});|code-block|syntax|javascript|447729|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can try following code snippet.</p>

<pre><code>function addScript(attribute, text, callback) {
    var s = document.createElement('script');
    for (var attr in attribute) {
        s.setAttribute(attr, attribute[attr] ? attribute[attr] : null)
    }
    s.innerHTML = text;
    s.onload = callback;
    document.body.appendChild(s);
}

addScript({
    src: 'https://www.google.com',
    type: 'text/javascript',
    async: null
}, '&lt;div&gt;innerHTML&lt;/div&gt;', function(){});
</code></pre>


blocks|key|447867|text|当脚本异步加载时，它们不能调用document.write。调用将被简单地忽略，并且将向控制台写入警告。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447868|您可以使用以下代码动态加载脚本：|447869|var+scriptElm+=+document.createElement('script');
scriptElm.src+=+'source.js';
document.body.appendChild(scriptElm);|code-block|syntax|javascript|447870|只有当源文件属于一个单独的文件时，这种方法才能很好地工作。|447871|但是，如果您有源代码作为内联函数，您希望动态加载这些函数，并且希望将其他属性添加到脚本标记中，例如class、type等，那么以下代码片段将对您有所帮助：|447872|var+scriptElm+=+document.createElement('script');
scriptElm.setAttribute('class',+'class-name');
var+inlineCode+=+document.createTextNode('alert("hello+world")');
scriptElm.appendChild(inlineCode);+
document.body.appendChild(scriptElm);|447873|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>When scripts are loaded asynchronously they cannot call document.write. The calls will simply be ignored and a warning will be written to the console.</p>
<p>You can use the following code to load the script dynamically:</p>
<pre><code>var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);
</code></pre>
<p>This approach works well only when your source belongs to a separate file.</p>
<p>But if you have source code as inline functions which you want to load dynamically and want to add other attributes to the script tag, e.g. class, type, etc., then the following snippet would help you:</p>
<pre><code>var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert(&quot;hello world&quot;)');
scriptElm.appendChild(inlineCode); 
document.body.appendChild(scriptElm);
</code></pre>


blocks|key|447880|text|一行(与上面的答案没有本质的区别)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447881|document.body.appendChild(document.createElement('script')).src+=+'source.js';|code-block|syntax|javascript|447882|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A one-liner (no essential difference to the answers above though):</p>

<pre class="lang-js prettyprint-override"><code>document.body.appendChild(document.createElement('script')).src = 'source.js';
</code></pre>


blocks|key|229948|text|差不多十年过去了，没有人会费心去写Promise版本，所以下面是我的(基于this+awnser)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|229949|function+addScript(src)+{
++return+new+Promise((resolve,+reject)+=>+{
++++const+s+=+document.createElement('script');

++++s.setAttribute('src',+src);
++++s.addEventListener('load',+resolve);
++++s.addEventListener('error',+reject);

++++document.body.appendChild(s);
++});
}|code-block|syntax|javascript|229950|用法|229951|try+{
++await+addScript('https://api.stackexchange.com/js/2.0/all.js');
++//+do+something+after+it+was+loaded
}+catch+(e)+{
++console.log(e);
}|229952|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/13122014/9449426^0|H|7|11|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>It's almost a decade later and nobody bothers to write the <code>Promise</code> version, so here is mine (based on <a href="https://stackoverflow.com/a/13122014/9449426">this</a> awnser):</p>
<pre><code>function addScript(src) {
  return new Promise((resolve, reject) =&gt; {
    const s = document.createElement('script');

    s.setAttribute('src', src);
    s.addEventListener('load', resolve);
    s.addEventListener('error', reject);

    document.body.appendChild(s);
  });
}
</code></pre>
<h2>Usage</h2>
<pre><code>try {
  await addScript('https://api.stackexchange.com/js/2.0/all.js');
  // do something after it was loaded
} catch (e) {
  console.log(e);
}
</code></pre>


blocks|key|447778|text|有很多种方法可以包含动态javascript，我在很多项目中都使用了这种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447779|var+script+=+document.createElement("script")
script.type+=+"text/javascript";
//Chrome,Firefox,+Opera,+Safari+3%2B
script.onload+=+function(){
console.log("Script+is+loaded");
};
script.src+=+"file1.js";
document.getElementsByTagName("head")[0].appendChild(script);|code-block|syntax|javascript|447780|您可以调用create一个通用函数，该函数可以帮助您根据需要加载任意多个javascript文件。这里有关于这方面的完整教程。|447781|Inserting+Dynamic+Javascript+the+right+way|offset|length|447782|entityMap|0|LINK|mutability|MUTABLE|url|https://movingdouble.com/inserting-dynamic-javascript-the-right-way/^0|0|0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Well, there are multiple ways you can include dynamic javascript,
I use this one for many of the projects.</p>

<pre><code>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);
</code></pre>

<p>You can call create a universal function which can help you to load as many javascript files as needed. There is a full tutorial about this here.</p>

<p><a href="https://movingdouble.com/inserting-dynamic-javascript-the-right-way/" rel="nofollow noreferrer">Inserting Dynamic Javascript the right way</a></p>


blocks|key|229865|text|以正确的顺序加载相互依赖的脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|229866|基于Satyam+Pathak响应，但修复了onload。它是在脚本实际加载之前触发的。|offset|length|229867|​|229868|const+scripts+=+['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js',+'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js',+'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let+count+=+0

++
+const+recursivelyAddScript+=+(script,+cb)+=>+{
++const+el+=+document.createElement('script')
++el.src+=+script
++if(count+<+scripts.length)+{
++++count+%2B%2B
++++el.onload+=+()+=>+recursivelyAddScript(scripts[count])
++++document.body.appendChild(el)
++}+else+{
++++console.log('All+script+loaded')
++++return
++}
}
+
++recursivelyAddScript(scripts[count])|code-block|syntax|javascript|229869|229870|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/57162086/1675736^0|0|2|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p>Loads scripts that depends on one another with the right order.</p>

<p>Based on <a href="https://stackoverflow.com/a/57162086/1675736">Satyam Pathak</a> response, but fixed the onload.
It was triggered before the script actually loaded.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) =&gt; {
  const el = document.createElement('script')
  el.src = script
  if(count &lt; scripts.length) {
    count ++
    el.onload = () =&gt; recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])</code></pre>
</div>
</div>
</p>


blocks|key|229656|text|要做到这一点，唯一的方法是用您自己的函数替换document.write，该函数会将元素附加到页面底部。对于jQuery来说，这很简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|229657|document.write+=+function(htmlToWrite)+{
++$(htmlToWrite).appendTo('body');
}|code-block|syntax|javascript|229658|如果像问题示例那样将htmlToWrite分成块进入document.write，则需要缓冲html段。可能是这样的：|229659|document.write+=+(function()+{
++var+buffer+=+"";
++var+timer;
++return+function(htmlPieceToWrite)+{
++++buffer+%2B=+htmlPieceToWrite;
++++clearTimeout(timer);
++++timer+=+setTimeout(function()+{
++++++$(buffer).appendTo('body');
++++++buffer+=+"";
++++},+0)
++}
})()|229660|entityMap^0|M|E|0|0|A|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>the only way to do this is to replace <code>document.write</code> with your own function which will append elements to the bottom of your page. It is pretty straight forward with jQuery:</p>

<pre><code>document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}
</code></pre>

<p>If you have html coming to document.write in chunks like the question example you'll need to buffer the <code>htmlToWrite</code> segments. Maybe something like this:</p>

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


blocks|key|447943|text|没有人提到这一点，但是您也可以通过使用URL和Blob将实际的源代码粘贴到脚本标记中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|447944|const+jsCode+=+`
+//+JS+code+in+here.+Maybe+you+extracted+it+from+some+HTML+string.
`

const+url+=+URL.createObjectURL(new+Blob([jsCode]))
const+script+=+document.createElement('script')
script.src+=+url
URL.revokeObjectURL(url)+//+dispose+of+it+when+done|code-block|syntax|javascript|447945|至于jsCode，你可能是从一些超文本标记语言中获得的。|447946|下面是一个更完整的示例，说明如何处理HTML源代码中任意数量的脚本：|447947|main()

async+function+main()+{
++++const+scriptTagOpen+=+/<script\b[%5E>]*>/g
++++const+scriptTagClose+=+/<\/script\b[%5E>]*>/g
++++const+scriptTagRegex+=+/<script\b[%5E>]*>[\s\S]*?<\/script\b[%5E>]*>/g

++++const+response+=+await+fetch('path/to/some.html')
++++const+html+=+await+response.text()

++++someElement.innerHTML+=+html

++++//+We+need+to+get+the+script+tags+and+manually+add+them+to+DOM
++++//+because+otherwise+innerHTML+will+not+execute+them.
++++const+codes+=
++++++++html
++++++++++++.match(scriptTagRegex)
++++++++++++?.map(code+=>+code.replace(scriptTagOpen,+'').replace(scriptTagClose,+''))
++++++++++++.map(code+=>+URL.createObjectURL(new+Blob([code])))+%7C%7C+[]

++++for+(const+code+of+codes)+{
++++++++const+script+=+document.createElement('script')
++++++++script.src+=+code
++++++++someElement.append(script)
++++++++URL.revokeObjectURL(code)
++++}
}|447948|entityMap^0|J|3|N|4|0|0|2|6|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>No one mentioned it, but you can also stick the actual source code into a script tag by making a URL out of it using <code>URL</code> and <code>Blob</code>:</p>
<pre class="lang-js prettyprint-override"><code>const jsCode = `
 // JS code in here. Maybe you extracted it from some HTML string.
`

const url = URL.createObjectURL(new Blob([jsCode]))
const script = document.createElement('script')
script.src = url
URL.revokeObjectURL(url) // dispose of it when done
</code></pre>
<p>as for the <code>jsCode</code>, you may have gotten it from some HTML.</p>
<p>Here's a more full example of how you'd handle any number of scripts in an HTML source:</p>
<pre class="lang-js prettyprint-override"><code>main()

async function main() {
    const scriptTagOpen = /&lt;script\b[^&gt;]*&gt;/g
    const scriptTagClose = /&lt;\/script\b[^&gt;]*&gt;/g
    const scriptTagRegex = /&lt;script\b[^&gt;]*&gt;[\s\S]*?&lt;\/script\b[^&gt;]*&gt;/g

    const response = await fetch('path/to/some.html')
    const html = await response.text()

    someElement.innerHTML = html

    // We need to get the script tags and manually add them to DOM
    // because otherwise innerHTML will not execute them.
    const codes =
        html
            .match(scriptTagRegex)
            ?.map(code =&gt; code.replace(scriptTagOpen, '').replace(scriptTagClose, ''))
            .map(code =&gt; URL.createObjectURL(new Blob([code]))) || []

    for (const code of codes) {
        const script = document.createElement('script')
        script.src = code
        someElement.append(script)
        URL.revokeObjectURL(code)
    }
}
</code></pre>


blocks|key|447798|text|这是一个精简的代码片段，与Google+Analytics和Facebook+Pixel使用的代码相同：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447799|!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");|code-block|syntax|javascript|447800|用您的脚本路径替换https://example.com/foo.js。|offset|length|style|CODE|447801|entityMap^0|0|0|9|Q|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here is a minified snippet, same code as Google Analytics and Facebook Pixel uses:</p>

<pre><code>!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");
</code></pre>

<p>Replace <code>https://example.com/foo.js</code> with your script path.</p>


blocks|key|229922|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|229923|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);
++++++++++++}
++++++++}|code-block|syntax|javascript|229924|<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>|229925|229926|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("load", init);

        const loadScript = async (url) =&gt; {
            const response = await fetch(url);
            const script = await response.text();
            eval(script);
        }

        function init() {
            const wistiaVideo = document.querySelector(".wistia_embed");

            if ("IntersectionObserver" in window &amp;&amp; "IntersectionObserverEntry" in window &amp;&amp; "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
                let lazyVideoObserver = new IntersectionObserver(function (entries, observer) {
                    entries.forEach(function (entry) {
                        if (entry.isIntersecting) {
                            setTimeout(() =&gt; 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);
            }
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height: 150vh; background-color: #f7f7f7;"&gt;&lt;/div&gt;
    &lt;h1&gt;Wistia Video!&lt;/h1&gt;

    &lt;div class="wistia_embed wistia_async_29b0fbf547" style="width:640px;height:360px;"&gt;&amp;nbsp;&lt;/div&gt;


    &lt;h1&gt;Video Ended!&lt;/h1&gt;</code></pre>
</div>
</div>
</p>


<p>I want to dynamically include a script tag in a webpage however I have no control of it's src so src=&quot;source.js&quot; may look like this.</p>
<pre><code>document.write('&lt;script type=&quot;text/javascript&quot;&gt;')
document.write('alert(&quot;hello world&quot;)')
document.write('&lt;/script&gt;')
document.write('&lt;p&gt;goodbye world&lt;/p&gt;')
</code></pre>
<p>Now ordinarily putting</p>
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;source.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>In the head works fine but is there any other way I can add <code>source.js</code> dynamically using something like <code>innerHTML</code>?</p>
<p><a href="http://jsfiddle.net/PRNnm/" rel="noreferrer">jsfiddle of what i've tried</a></p>


Dynamically add script tag with src that may include document.write

jQuery

我想在网页中动态包含一个脚本标签，但是我无法控制它的src，所以src="source.js“可能看起来像这样。document.write('<script type="text/javascript">')document.write('alert("hello world")')document.write('</script>')document.write('<p>goodbye wor

问使用可能包含document.write的源动态添加脚本标记
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用可能包含document.write的源动态添加脚本标记EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用可能包含document.write的源动态添加脚本标记
EN