DOM Level 2 HTML方法,它将文本字符串写入document.open()打开的文档流。
动态添加带有src的脚本标签,可能包含document.write
我想在网页中动态包含脚本标签,但是我无法控制它的 src,所以 src="source.js" 可能看起来像这样。 文档.write(' <p>我想在网页中动态包含脚本标签,但是我无法控制它的 src,所以 src="source.js" 可能看起来像这样。</p> <pre><code>document.write('<script type="text/javascript">') document.write('alert("hello world")') document.write('</script>') document.write('<p>goodbye world</p>') </code></pre> <p>现在平常放</p> <pre><code><script type="text/javascript" src="source.js"></script> </code></pre> <p>在头部工作正常,但是有没有其他方法可以使用 <pre><code>source.js</code></pre> 之类的东西动态添加 <pre><code>innerHTML</code></pre>?</p> <p><a href="http://jsfiddle.net/PRNnm/" rel="noreferrer">jsfiddle我所尝试过的</a></p> </question> <answer tick="false" vote="323"> <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> </answer> <answer tick="false" vote="130"> <p>您可以像这样使用 <a href="https://developer.mozilla.org/en-US/docs/DOM/document.createElement" rel="noreferrer"><pre><code>document.createElement()</code></pre></a> 功能:</p> <pre><code>function addScript( src ) { var s = document.createElement( 'script' ); s.setAttribute( 'src', src ); document.body.appendChild( s ); } </code></pre> </answer> <answer tick="false" vote="98"> <p>有<pre><code>onload</code></pre>函数,当脚本加载成功时可以调用它:</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> </answer> <answer tick="false" vote="39"> <p>差不多十年过去了,没有人费心去写 <pre><code>Promise</code></pre> 版本,所以这是我的(基于 <a href="https://stackoverflow.com/a/13122014/9449426">this</a> 答案):</p> <pre><code>const addScript = async src => new Promise((resolve, reject) => { const el = document.createElement('script'); el.src = src; el.addEventListener('load', resolve); el.addEventListener('error', reject); document.body.append(el); }); </code></pre> <h2>使用方法</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> </answer> <answer tick="false" vote="21"> <p>我编写的一个很好的小脚本来加载多个脚本:</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 < 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>用途:</p> <pre><code>scriptLoader(['a.js','b.js'], function() { // use code from a.js or b.js }); </code></pre> </answer> <answer tick="false" vote="18"> <p>当脚本异步加载时,它们无法调用 document.write。这些调用将被忽略,并且警告将写入控制台。</p> <p>您可以使用以下代码动态加载脚本:</p> <pre><code>var scriptElm = document.createElement('script'); scriptElm.src = 'source.js'; document.body.appendChild(scriptElm); </code></pre> <p>仅当您的源属于单独的文件时,此方法才有效。</p> <p>但是,如果您有源代码作为内联函数,您想要动态加载并且想要向脚本标记添加其他属性,例如类、类型等,那么以下代码片段将对您有所帮助:</p> <pre><code>var scriptElm = document.createElement('script'); scriptElm.setAttribute('class', 'class-name'); var inlineCode = document.createTextNode('alert("hello world")'); scriptElm.appendChild(inlineCode); document.body.appendChild(scriptElm); </code></pre> </answer> <answer tick="false" vote="12"> <p>您可以尝试以下代码片段。</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 }, '<div>innerHTML</div>', function(){}); </code></pre> </answer> <answer tick="false" vote="10"> <p>一句话(不过与上面的答案没有本质区别):</p> <pre><code>document.body.appendChild(document.createElement('script')).src = 'source.js'; </code></pre> </answer> <answer tick="false" vote="6"> <p><strong>这对我来说是工作。</strong> </p> <p>你可以检查一下。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>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); window.onload = function() { if (window.jQuery) { // jQuery is loaded alert("ADD SCRIPT TAG ON HEAD!"); } else { // jQuery is not loaded alert("DOESN'T ADD SCRIPT TAG ON HEAD"); } }</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="4"> <p>以正确的顺序加载相互依赖的脚本。</p> <p>基于 <a href="https://stackoverflow.com/a/57162086/1675736">Satyam Pathak</a> 响应,但修复了加载。 它是在脚本实际加载之前触发的。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><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) => { const el = document.createElement('script') el.src = script if(count < scripts.length) { count ++ el.onload = () => recursivelyAddScript(scripts[count]) document.body.appendChild(el) } else { console.log('All script loaded') return } } recursivelyAddScript(scripts[count])</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="3"> <p>嗯,有多种方法可以包含动态 JavaScript, 我在很多项目中都使用这个。</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>您可以调用创建一个通用函数,它可以帮助您根据需要加载尽可能多的javascript文件。这里有关于此的完整教程。</p> <p><a href="https://movingdouble.com/inserting-dynamic-javascript-the-right-way/" rel="nofollow noreferrer">以正确的方式插入动态Javascript</a></p> </answer> <answer tick="false" vote="3"> <p>没有人提到这一点,但您也可以使用 <pre><code>URL</code></pre> 和 <pre><code>Blob</code></pre> 创建 URL,将实际源代码粘贴到脚本标记中:</p> <pre><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>至于<pre><code>jsCode</code></pre>,你可能已经从一些HTML中得到了它。</p> <p>这里有一个更完整的示例,说明如何处理 HTML 源中的任意数量的脚本:</p> <pre><code>main() async function main() { const scriptTagOpen = /<script\b[^>]*>/g const scriptTagClose = /<\/script\b[^>]*>/g const scriptTagRegex = /<script\b[^>]*>[\s\S]*?<\/script\b[^>]*>/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]))) || [] for (const code of codes) { const script = document.createElement('script') script.src = code someElement.append(script) URL.revokeObjectURL(code) } } </code></pre> </answer> <answer tick="false" vote="1"> <p>执行此操作的唯一方法是将 <pre><code>document.write</code></pre> 替换为您自己的函数,该函数会将元素附加到页面底部。使用 jQuery 非常简单:</p> <pre><code>document.write = function(htmlToWrite) { $(htmlToWrite).appendTo('body'); } </code></pre> <p>如果您的 html 像问题示例一样以块形式进入 document.write,则需要缓冲 <pre><code>htmlToWrite</code></pre> 段。也许是这样的:</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> </answer> <answer tick="false" vote="1"> <p>我通过递归附加每个脚本来尝试</p> <p><strong>注意</strong> 如果您的脚本相互依赖,则位置需要同步。</p> <p>主要依赖项应该位于数组的最后,以便初始脚本可以使用它</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><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) => { const el = document.createElement('script') el.src = script if(count < scripts.length) { count ++ el.onload = recursivelyAddScript(scripts[count]) document.body.appendChild(el) } else { console.log('All script loaded') return } } recursivelyAddScript(scripts[count])</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>这是一个缩小的片段,与 Google Analytics 和 Facebook Pixel 使用的代码相同:</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>将 <pre><code>https://example.com/foo.js</code></pre> 替换为您的脚本路径。</p> </answer> <answer tick="false" vote="-1"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>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></pre> <pre><code><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></code></pre> </div> </div> <p></p> </answer> </body></html>
我正在制作一个关于 HTML 的教程,并正在尝试制作这样的系统。将出现一个问题,您需要在文本框中输入正确答案。根据你的回答,电脑会显示
如何将此document.write转换为innerHTML?
我正在使用此脚本来输出帖子总数。 函数 mbhTotalCount(json) { var TotalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); 文档.write (</desc> <question vote="0"> <p>我正在使用此脚本来输出帖子总数。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> function mbhTotalCount(json) { var totalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); document.write (totalCount); } </script> <span class='count'> <script src="/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script> </span></code></pre> </div> </div> <p></p> <p>我们如何将其更改为替代形式?</p> </question> <answer tick="false" vote="0"> <p>只需将变量分配给跨度的 <pre><code>innerText</code></pre>。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script> function mbhTotalCount(json) { var totalCount = parseInt(json.feed.openSearch$totalResults.$t, 10); document.getElementById("count").innerText = totalCount; } </script> <span class='count'> <script src="/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script> </span></code></pre> </div> </div> <p></p> </answer> </body></html>
在 document.write 中对于带有属性的标签使用正确的语法是什么?
我在JavaScript的document.write方法中使用以下代码: document.write("<font color="blue">["+time()...</desc> <question vote="1"> <p>我在 JavaScript 的 <em>document.write</em> 方法中使用以下代码:</p> <pre><code> <script type="text/javascript"> document.write("<font color="blue">["+time()+"]</font>"); </script> </code></pre> <p>但这似乎不起作用。我该如何解决它?</p> </question> <answer tick="true" vote="4"> <p>这个问题与 HTML 没有直接关系,只是与字符串文字在 JavaScript(以及几乎所有其他编程语言)中的工作方式有关。如果您想在由 <pre><code>"</code></pre> 字符分隔的 JavaScript 字符串中使用 <pre><code>"</code></pre> 字符,则必须对其进行转义:<pre><code>\"</code></pre>。或者使用 <pre><code>'</code></pre> 来分隔字符串或属性值。</p> <pre><code>document.write("<font color=\"blue\">["+time()+"]</font>"); document.write('<font color="blue">['+time()+"]</font>"); document.write("<font color='blue'>["+time()+"]</font>"); </code></pre> <hr/> <p>也就是说,使用 <pre><code>document.write</code></pre> 生成 HTML 通常不是一个好主意(它只在加载时工作,通常最好用更可靠的服务器端代码或更可重用的 DOM 操作替换))并且 <pre><code>font</code></pre> 元素已被弃用.</p> </answer> <answer tick="false" vote="2"> <pre><code><script type="text/javascript"> document.write("<font color=\"blue\">[" + time() + "]</font>"); </script> </code></pre> <p>或</p> <pre><code><script type="text/javascript"> document.write('<font color="blue">[' + time() + ']</font>'); </script> </code></pre> <p>请注意,<pre><code>time</code></pre> 在 JavaScript 中并不作为函数存在——我假设您在上面创建了一个未包含在代码片段中的函数。另外,除非您只是在尝试,否则您不应该真正将 <pre><code>document.write</code></pre> 用于任何事情。您可以在 Firefox 的 Firebug 或 Safari / Chrome Web Inspector 中使用 <pre><code>console.log</code></pre> 来测试所有这些,比全页面刷新进行实验要快得多。还注意到我如何在 <pre><code>+</code></pre> 标志两侧添加空格:更容易阅读。</p> </answer> <answer tick="false" vote="0"> <p>您可以使用 CSS 代替 HTML,而且非常简单:</p> <pre><code>window.document.write("<span style=\"color:blue;font-size: 5em;\">hello " + variable + "<\/span>"); </code></pre> </answer> <answer tick="false" vote="-1"> <pre><code>var color = 'blue'; document.write("<font color="+color+">["+time()+"]</font>"); </code></pre> <p>或者</p> <pre><code> document.write("<font color='blue'>["+time()+"]</font>"); </code></pre> </answer> </body></html>
在 MutationObserver 中使用 document.write 会导致浏览器卡住并且 document.readyState 总是“正在加载”
免责声明:我知道为什么我应该避免使用 document.write 和 document.write 清除页面。 假设我需要在加载 DOM 时将同步(阻塞)脚本注入到 DOM 中(文档...
为什么document.write无法在带有HTML标签的变量上工作?
document.write上的变量工作正常。在带有HTML标记的字符串上进行document.write也可以正常工作。但是,当尝试在带有HTML标记的JS变量上使用document.write时,该程序将无法运行....
Javascript文本引擎一次键入所有字母,而不是按命令输入
我正在用javascript开发文本引擎,用户在其中输入一系列字母,这些字母会在屏幕上打印出来。我目前正在为每个单独的键使用if语句。为什么...
我正在尝试用JavaScript编写一个小任务,使人们可以在屏幕上拖放两个对象。这里的网站:http://www.unisg.bplaced.net/JS/dragdrop.html我的目标是现在读出...
var i = 1; while(i <100){i * = 2; document.write(i +“,”); }这样写:2、4、8、16、32、64、128,写128之后取逗号的最简单方法是什么?
错误TS2584(TS)的含义是什么…尝试更改'lib'编译器选项以包括'dom'?
我使用VS并编写Typescript,我只想键入命令“ document.write”而不会出现错误代码。我现在所拥有的是此命令“文档”的错误代码。我只是不想...
为什么在for循环中使用document.getElementById('')。innerHTML和document.write()的结果不同?
要清楚一下document.write(),我知道这已经过时了,不想重新加载并关闭网站。所以我想出了document.getElementById()。innerHTML作为替代方案。但是,...
为什么在for循环中使用document.getElementById('')。innerHTML和document.write()的结果不同?
要清楚一下document.write(),我知道这已经过时了,不想重新加载并关闭网站。所以我想出了document.getElementById()。innerHTML作为替代方案。但是,...
小提琴与在服务器上运行时实际起作用的javascript语句之间的差异似乎存在一些严重的问题。你们可以帮我解决这个问题吗?我有...
以下脚本本身可以很好地在页面上运行。但是,嵌入它时,document.write会接管,从而使页面的其余部分被遗忘。我想要一个替代解决方案...
在document.write中是否可以编写和执行i / else语句?
我正在尝试使文本随机化,这将根据给定的单词及其放置位置来创建新句子。我已经创建了名词,动词,数量等的数组。问题是,我需要它...
如何在网页中多次加载包含document.write的Javascript?
我在head标签中显示了一个javascript代码:document.write('.. .. ');代码...
JavaScript文件加载回退。替代document.write()
您可能熟悉旧的良好的Jquery负载回退:window.jQuery || document.write('<script src =“ https://example.com/jquery.js”>')但是我...
为什么使用document.write不会显示在浏览器上的文字
我有这样一个代码是一个js文件,另一个是HTML文件,问题是,当我运行的代码浏览器的犯规显示功能的文本文件撰写(...),有人能帮助我吗?功能...
我有三个传奇侦听相同的动作,因此发生或多或少的同时。其中一人用重写页面:document.open();文件撰写(内容);在此之后发生的,...
我试图在selenium和python的网页上运行一些自动脚本,但我遇到的问题是使用document.write()加载网页。我必须找到一些元素,但他们......