将外部 HTML 加载到页面中，包括 Javascript 并在加载时启动 JS答案

【问题标题】：Load External HTML into page INCLUDING Javascript and Initiate JS On load将外部 HTML 加载到页面中，包括 Javascript 并在加载时启动 JS
【发布时间】：2021-04-07 13:18:21
【问题描述】：

我需要一个真正轻量级的解决方案来将外部 HTML 文件加载到纯 JS 页面中。这个外部页面有 HTML、JS 和 CSS。基本上我正在创建一个小的 JS 片段，它加载一个按钮 + 模态（在外部 JS 文件中），当单击按钮时，模态出现。

我的按钮+模态效果很好，但我不知道如何将它包含在页面上以便触发 JS 事件。我可以用XMLHttpRequest 加载它，但是 JS 处于非活动状态并且事件不会触发。

以下是我的示例代码（获取文件但不启动 JS）：

    <script type="text/javascript">
        var xhr; if (window.XMLHttpRequest){xhr = new XMLHttpRequest(); } else { console.log('Cannot create HTTP Request');}
        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                document.getElementById("my--button-container-19763").innerHTML = xhr.response;
            } else {
                console.log('The request failed!');
            }
        };
        xhr.open('GET', 'scripts.html'); xhr.send();
    </script>
    <div id="my--button-container-19763"></div>

这是正在加载的按钮+模态 HTML 页面的示例代码：


<style type="text/css">
div#my--modal-19763.my--modal{display:none;position:fixed;z-index:1;padding-top:7vh;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.4)}
div#my--modal-19763.my--modal .my--modal-content{position:relative;background-color:#fefefe;min-height:475px;height:86vh;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name:myModal19763AnimateTop;-webkit-animation-duration:.4s;animation-name:myModal19763AnimateTop;animation-duration:.4s;border-radius: 5px;overflow: hidden;border: 2px solid #eee;}
div#my--modal-19763.my--modal .my--close{color: #fff; font-size: 28px; font-weight: 700; z-index: 3; position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); height: 35px; width: 35px; border-radius: 35px; text-align: center; line-height: 35px;}
div#my--modal-19763.my--modal .my--close:hover,
div#my--modal-19763.my--modal .my--close:focus{background: rgba(0,0,0,.8); text-decoration:none;cursor:pointer}
div#my--modal-19763.my--modal .my--modal-header{padding:2px 16px;background-color:#5cb85c;color:#fff}
div#my--modal-19763.my--modal .my--modal-body{padding:2px 16px;position: relative;height: 100%;}
div#my--modal-19763.my--modal .my--modal-footer{padding:2px 16px;background-color:#5cb85c;color:#fff}
div#my--modal-19763.my--modal .my--modal-body-iframe {position: absolute;top:0px; left: 0px; right:0px; bottom: 0px;border: none;}
@-webkit-keyframes myModal19763AnimateTop {
  from{top:-300px;opacity:0}
  to{top:0;opacity:1}
}
@keyframes myModal19763AnimateTop {
  from{top:-300px;opacity:0}
  to{top:0;opacity:1}
}
</style>
<button id="my--modal-19763-btn">Open my--modal</button>
<div id="my--modal-19763" class="my--modal">
  <span id="my--modal-19763-close" class="my--close">&times;</span>
  <div class="my--modal-content">
    <div class="my--modal-body">
      <iframe class="my--modal-body-iframe" src="https://app.my.io" width="100%" height="100%"></iframe>
    </div>
  </div>
</div>
<script type="text/javascript">
  var myModal19763 = document.getElementById("my--modal-19763");
  var myModalBtn19763 = document.getElementById("my--modal-19763-btn");
  var myModalClose19763 = document.getElementById("my--modal-19763-close");
  myModalBtn19763.onclick = function() {
    myModal19763.style.display = "block";
  }
  myModalClose19763.onclick = function() {
    myModal19763.style.display = "none";
  }
  window.onclick = function(event) {
    if (event.target == myModal19763) {
      myModal19763.style.display = "none";
    }
  }

</script>

【问题讨论】：

有什么理由不能将<iframe> 粘贴到加载每个页面的模式中吗？这样，CSS 和 JS 将是自包含的，并且会避免与外部内容发生冲突。
模态框实际上有一个 iframe。我需要简单地使用 JS 代码片段加载 Button + Modal（带有 iframe）。

标签： javascript html ajax xmlhttprequest

【解决方案1】：

如果没有some messiness，你将无法远程执行注入的 JS。

解决此问题的最佳方法是将<iframe> 插入到外部页面的my--button-container-19763 元素中。然后内容将在那里加载而无需 AJAX。不过，根据外部页面的样式，这可能会限制模态框的大小，因此可能需要进行一些重构。

<div id="my--button-container-19763">
    <iframe src="scripts.html">
</div>

【讨论】：