0

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

Improve this question
3
  • Can't you put the document.write(example_content); inside the js file? Commented Aug 9, 2012 at 12:08
  • 2
    Are you trying to put HTML code inside scripts tags? I am sorry, I don't get this question. Commented Aug 9, 2012 at 12:09
  • @ Дамян Станчев Still, if won't write as a script, just as a string. Commented Aug 9, 2012 at 12:12

4 Answers 4

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This might actually work, only I'm getting an error for the undefined method 'appendChild'
@ZyykSavvins Ah sorry that was a mistake on my part. Fixed it. Try it now.
Ok, so the script is being added the DOM, but its being added at the bottom, meaning AFTER the script that needs to access it. Any chance, it can be placed at a particular slot ? Or even at the top ? since it doesnt depend on any other script
@ZyykSavvins What you can do is queue up other scripts that depend on this one in the onload event. But I wouldn't recommend that since it would take forever to load. A better option would be to just create a flag variable and set it to true in the onload event handler. Then you can check for the flag at any dependant script and if its still not set, you set a timeout and recall the script after a second or two.
0

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

Improve this answer

3 Comments

Thanks for the answer. I know my question is a bit vague. I tried to move the document.write inside the file, but still. I'm trying to write <div> <script ...bla bla bla ...></scirpt> </div>
but is being written as a string rather than actually the contents of the file :/
Could you put this on JSLint? Or upload a screen shot?
0

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

Improve this answer

4 Comments

The div would not have yet been created, so I can't really address it with its id. What I have is an object that contains the HTML string and another Object that uses that string to write it in another div. Sounds complicated I know, its just how my current project is built.
What are the triggers for the events?
What happens first? I would assume you generate the divs at JS level and then you want to write into them. Is that correct? If there is the only event that causes the flow is the onload, then why do you need those two? High level JS libraries(like Google Closure), have methods like goog.dom.createDom. What that does is create a domElement with all the properties and text you want. So instead of first creating the divs and then populating them with content, do everything at once. Don't see why not, unless there is an event which has to trigger all this(such as a mouse click etc)
Its like this: I have an Object, called Frame, that creates and controls a div on screen that acts similar to a window (can be dragged, resized, maximized, closed, etc ...) Then I have an Object called App, which is used to be extended into sub classes. Now, each sub class creates the contents of the Window Object. So the div for the window content is being created inside the same string where the <script> tags are placed (the ones which are being written as plain text)
0

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); 
    }
 }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.