在 innerHTML 中加载脚本 [重复]
Posted
技术标签:
【中文标题】在 innerHTML 中加载脚本 [重复]【英文标题】：Load scripts inside innerHTML [duplicate] 【发布时间】：2018-11-19 00:38:34 【问题描述】：在这里受到指责后，我尝试从头开始重新编码。我需要为出现在 div 中的 html 文件加载 JS 文件...
<script type="text/javascript">
function getInclude(strIncludeContainer, strIncludeURL)
var strPage = '';
var intIndexOfBodyOpen = 0;
var intIndexOfBodyClose = 0;
var objXhttp;
objXhttp = new XMLHttpRequest();
objXhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
strPage = this.responseText;
intIndexOfBodyOpen = strPage.indexOf('<body>');
intIndexOfBodyClose = strPage.indexOf('</body>');
document.getElementById(strIncludeContainer).innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);
;
objXhttp.open("GET", strIncludeURL, true);
objXhttp.send();
getInclude("divUnifiedAppWording", "../mpage/Unified_App_Wording");
var script = document.createElement("script");
script.src = "../resource/resmgr/scripts/unified_app.js";
$container.appendChild(script);
</script>
<div id="divUnifiedAppWording"></div>
function getInclude 工作正常，但我无法加载unified_app.js 中的Javascript。作为参考，在unified_app.js 我有以下脚本：
const date = new Date();
let offset = 0;
const threshold = new Date();
threshold.setMonth(3); //January is 0!
threshold.setDate(3);
if (Date.now() > threshold)
offset = 1;
var theDate = new Date();
var award_year1 = date.getFullYear() + offset;
var award_year2 = date.getFullYear() + 1 + offset;
console.log(award_year1);
console.log(award_year2);
在花了几天时间试图找出解决我的问题的方法后，我真的迷失了！我觉得找到一个简单的解决方案来解决这个问题应该不难。希望我没有在这里吠叫错误的树...在此先感谢。
【问题讨论】：
【参考方案1】：使用 JavaScript 附加到页面的脚本只有在显式创建时才会加载，例如使用 document.createElement。 Barmar 的答案在您的特定情况下很好地涵盖了这一点，如果可以的话，您绝对应该使用他的答案。否则，假设您的代码的所有其他部分都可以正常工作，如果您正在寻找一种更动态的方法，那么如果您替换这一行，它应该可以工作......
document.getElementById(strIncludeContainer).innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);
...用这些线。
var includeContainer = document.getElementById(strIncludeContainer);
includeContainer.innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);
var scripts = includeContainer.getElementsByTagName("script");
for(var i = 0; i < scripts.length; i++)
var script = document.createElement("script");
if(scripts[i].text)
script.text = scripts[i].text;
else
for(var j = 0; j < scripts[i].attributes.length; j++)
if(scripts[i].attributes[j].name in HTMLScriptElement.prototype)
script[scripts[i].attributes[j].name] = scripts[i].attributes[j].value;
scripts[i].parentNode.replaceChild(script, scripts[i]);
这基本上只是从容器中克隆每个脚本元素，显然是用document.createElement 启动的，以便它实际工作，然后用克隆的元素替换原始脚本元素。
【讨论】：
【参考方案2】：加载脚本文件的正确方法是创建script 元素。
var script = document.createElement("script");
script.src = "../resource/resmgr/scripts/unified_app.js";
document.head.appendChild(script);
【讨论】：
感谢您的帮助。我更改了上面的代码以反映我对您的建议的理解。不幸的是，这仍然不起作用:( 我认为无法访问的代码消息与我的代码无关。 该错误的重要部分是“ReferenceError: $container is not defined”。
改用document.head。
我不确定为什么只有在使用动态加载时才会出现警告。但您可能需要查看此页面：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…，其中显示了常见原因。以上是关于在 innerHTML 中加载脚本 [重复]的主要内容，如果未能解决你的问题，请参考以下文章