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

Posted 2023-03-05

【中文标题】将外部 HTML 加载到页面中，包括 Javascript 并在加载时启动 JS

【英文标题】：Load External HTML into page INCLUDING Javascript and Initiate JS On load

【发布时间】：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--modaldisplay: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-contentposition: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--closecolor: #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:focusbackground: rgba(0,0,0,.8); text-decoration:none;cursor:pointer
div#my--modal-19763.my--modal .my--modal-headerpadding:2px 16px;background-color:#5cb85c;color:#fff
div#my--modal-19763.my--modal .my--modal-bodypadding:2px 16px;position: relative;height: 100%;
div#my--modal-19763.my--modal .my--modal-footerpadding: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 
  fromtop:-300px;opacity:0
  totop:0;opacity:1

@keyframes myModal19763AnimateTop 
  fromtop:-300px;opacity:0
  totop: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"  ></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）。

【参考方案1】：

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

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

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