CODEWITHSUNDEEP
javascriptfilefunctionincludeeval
Zyyk Savvins
Zyyk Savvins

Reputation: 493

Javascript - include another script by using the <script> tag?

So I have a function that writes a string into a div. The string is declared as content, which consists of html code, like this:

<h2>This is a test result</h2>
<script type="text/javascript" src="example_content.js"></script>
<script type="text/javascript"> document.write(example_content); </script>

where example_content.js :

example_content = '<p>some text some text some text some text some text</p>'
+ '<p>some more text....</p>'
+ '<hr />'
+ '<p>End of text</p>';

Problem is, instead of getting this in the div:

<h2>This is a test result</h2>
<p>some text some text some text some text some text</p>
<p>some more text....</p>
<hr />
<p>End of Text</p>

I end up, literaly, with this:

<h2>This is a test result/h2>
<script type="text/javascript" src="example_content.js"></script>
<script type="text/javascript"> document.write(example_content); </script>

Is there a way to avoid writting the script tag as a string ? but as an actual script ?

Thanks for any help in advance :)

Upvotes: 0

Views: 4873

Answers (4)

cypherabe
cypherabe

Reputation: 2603

If I understand you correctly, you insert your content as innerHTML into a <div> , and the scripts don't execute.

As far as I know, this is the expected behavior, as there is no onLoad, document.ready etc. event when you alter the innerHTML of an element.

You could parse the inserted string for <script> nodes. Warning, this is a very "hacky" thing to do, usually there are better ways, for example using the success callback of the ajax functions of the various script libraries.

Nevertheless, here is what we used once. This needs to be executed after you inserted your content string. Please don't judge me, I was young and the time was short...

var div = document.getElementById("yourParentDiv");
if(div != null){
    var x = div.getElementsByTagName("script");
    for(var i=0;i<x.length;i++) {
       eval(x[i].text); 
    }
 }

Upvotes: 0

Uzair Sajid
Uzair Sajid

Reputation: 2165

You can't do that. You can't add script tags and execute them by writing the HTML. If you must load scripts dynamically, you should add them to the DOM. You can try this to load an external script file and execute the method.

(function(document){
    var s = document.createElement('script');
    s.id = "external_content";
    s.async = true;
    s.src = "example_content.js";
    document.getElementsByTagName('head')[0].appendChild(s);
    s.onload = function() {
        document.write(example_content);
    }
}(document));

What it basically does is that it creates a new script element dynamically and adds it to the DOM. It also sets an onload event handler which would fire once the script is downloaded completely.

Upvotes: 2

user1189402
user1189402

Reputation:

Okay so basically you want to write HTML inside the contents of your div. Say you have a div with the following id: myContentDiv

    /**
    *  NOTICE HOW IM USING \ before " TO ESCAPE THE CHARACTERS INSIDE THE HTML STRING
    */
    var yourCustomHTMLString = "<h1>this is a tag</h1><div class=\"yourClass\">something</div>";

    var contentDiv = document.getElementById('myContentDiv');
    contentDiv.innerHTML = yourCustomHTMLString;

Also, in your mark-up you need to specify a trigger for your JS, for instance an onload trigger.

window.onload = function(){
document.write(example_content);
}

And now say you want a function that will load an HTML string into a div.

function loadContent(HTMLstring, targetDivID)
{
   var myDiv = document.getElementById(targetDivID);
   myDiv.innerHTML = HTMLstring; 
}

If you are trying to include a JS script inside another JS script, you need Ajax. If you are using a JS library, all common ones have a script load method predefined.

Dynamically load a JavaScript file

Upvotes: 0

Mike Sav
Mike Sav

Reputation: 15291

I'm not sure about this question due to the wording however you don't need two <script> tags. At the end of the example_content.js place the document.write(example_content); then remove the <script type="text/javascript"> document.write(example_content); </script> from the html file.

Also if this is what you want I would recommend you use object.innerHTML rather than document.write and place the script at the bottom of your page.

if this doesn't work or isn't what you want please put a comment and I'll remove and use JSLint for an example.

Here's some info: https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

Upvotes: 0

Related Questions