Load scripts inside innerHTML

Question

After getting rebuked on here, I tried to recode this from scratch. I need to have a JS file load for an HTML file that appears in a div...

<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 works fine, but I can't get the Javascript in unified_app.js to load. For reference, in unified_app.js I have the following script:

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

I am really lost with this after spending several days trying to figure out a solution to my problem! I feel like it should not be this difficult to find a simple solution to this issue. Hopefully I'm not barking up the wrong tree here... Thanks in advance.

Barmar · Accepted Answer · 2018-06-09T00:09:52.107

1

The correct way to load a script file is by creating a script element.

var script = document.createElement("script");
script.src = "../resource/resmgr/scripts/unified_app.js";
document.head.appendChild(script);

edited Jun 09 '18 at 00:09

answered Jun 08 '18 at 23:26

Barmar

741,623
53
500
612

Thank you for your help. I changed my code above to reflect my understanding of your suggestion. Unfortunately, this is still not working :( – beingbecoming Jun 09 '18 at 00:02
Are there any errors in the Javascript console? – Barmar Jun 09 '18 at 00:03
Yes, i am getting the following error, which I don't understand: – beingbecoming Jun 09 '18 at 00:05
unreachable code after return statement[Learn More] combined.js:604:1 ReferenceError: $container is not defined[Learn More] Bozarth:351:1 unreachable code after return statement[Learn More] – beingbecoming Jun 09 '18 at 00:05
You aren't supposed to just paste it. You need to examine the code they provided, and then properly integrate it into yours. – Grant Gryczan Jun 09 '18 at 00:05
@beingbecoming Your code has `$container.appendChild(script);`, I assumed you defined `$container` elsewhere in your script. – Barmar Jun 09 '18 at 00:06
1

I don't think the unreachable code messages have anything to do with my code. – Barmar Jun 09 '18 at 00:07
1

The important part of that error is the "`ReferenceError: $container is not defined`". – Grant Gryczan Jun 09 '18 at 00:09
@Barmar I did not. I'm trying to retrofit code created by a previous developer. – beingbecoming Jun 09 '18 at 00:09
1

Use `document.head` instead. – Barmar Jun 09 '18 at 00:09
Sorry I disappeared... I got sucked into tinkering. – beingbecoming Jun 09 '18 at 00:45
I got everything to come back clean now EXCEPT I'm now getting a different error unreachable code after return statement – beingbecoming Jun 09 '18 at 00:45
You have a function somewhere that has a statement after `return`. Since `return` exits the function, it makes no sense to do that. – Barmar Jun 09 '18 at 00:46
It has absolutely nothing to do with this question. – Barmar Jun 09 '18 at 00:46
Okay, thanks, I still haven't gotten the script to work properly in the innerHTML, so I figured this could have been part of the problem. When I load the page-in-a-page along the date-calc script runs fine. – beingbecoming Jun 09 '18 at 00:55
1

I'm not sure why the warning is only when you use dynamic loading. But you might want to check this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return which shows the common causes. – Barmar Jun 09 '18 at 00:57
I did some troubleshooting and the console is coming back clean. It does the date calculations on the console. The issue is `` is not producing anything (even if I put "hello" inside the document write it doesn't produce while using innerHTML but it does when just loaded by itself. – beingbecoming Jun 09 '18 at 01:26
You shouldn't use `document.write()` in scripts that run after the page has loaded. It will wipe out the current document. – Barmar Jun 11 '18 at 15:40

Grant Gryczan · Answer 2 · 2018-06-09T00:13:13.137

Scripts appended to the page using JavaScript only load if they are explicitly created, like using document.createElement. Barmar's answer covers this just fine in your particular case, and you should absolutely use his answer if you can. Otherwise, assuming every other part of your code is functional, if you're looking for a more dynamic approach, it should work if you replace this line...

document.getElementById(strIncludeContainer).innerHTML = strPage.substring(intIndexOfBodyOpen + 6, intIndexOfBodyClose);

...with these lines.

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]);
}

This basically just clones every script element from the container, obviously initiated with document.createElement so that it actually works, and then replaces the original script elements with the cloned ones.

Load scripts inside innerHTML

2 Answers2

Linked

Related