Load External HTML into page INCLUDING Javascript and Initiate JS On load

Question

I need a really lightweight solution for loading an external HTML file into a page with pure JS. This external page has HTML, JS and CSS. Basically I'm creating a small JS snippit that loads a button + modal (which is in the external JS file) and when the button is clicked the modal appears.

I have the button+modal working great, but I can't figure out how to include it on the page so that the JS events trigger. I can load it with a XMLHttpRequest, but the JS in inactive and the events don't trigger.

Below is my sample code (which gets the file but doesn't initiate the 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>

Here is the sample code for the button+modal HTML page being loaded:


<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>

Is there any reason why you couldn't just stick an `` into the modal that loads each page? With that, the CSS and JS would be self-contained and would avoid conflicts with the outer content. — Riley, Dec 31 '20 at 05:45
The modal actually has an iframe. I need to simply load the Button + Modal (with iframe) with a JS code snippit. — DigitalMC, Dec 31 '20 at 05:47

score 0 · Answer 1 · answered Dec 31 '20 at 06:06

You won't be able to remote execute injected JS without some messiness.

The best way to get around this would be to insert an <iframe> into the my--button-container-19763 element on the outer page. Then the content will load there without any need for AJAX. Depending on the styling of the outer page though, this may limit the size of your modal, so it may take some refactoring.

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

Load External HTML into page INCLUDING Javascript and Initiate JS On load

1 Answers1