在 innerHTML 中加载脚本 [重复]答案

【问题标题】：Load scripts inside innerHTML [duplicate]在 innerHTML 中加载脚本 [重复]
【发布时间】：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);

在花了几天时间试图找出解决我的问题的方法后，我真的迷失了！我觉得找到一个简单的解决方案来解决这个问题应该不难。希望我没有在这里吠叫错误的树...在此先感谢。

【问题讨论】：

标签： javascript

【解决方案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/…，其中显示了常见原因。