Add script to script that contains document.write won't execute

Question

We're using a webprogram that uses ajax and jquery and the like (Netsuite). I want to change something on a page and have tried to use document.ready and window.load to get an external script loaded on the page. I've tried to load the external script in the head and body.. but the contents aren't written. The external file looks for a specific div id and then prepends some code to that. It never works, because the page itself loads dynamically and the div I'm looking for loads when the rest of the page is done. So window.load, etc. never work...

At last I'm in the program itself that loads parts and pieces and am trying to simply write the external script file in there. Now this time the external file has a simple document.write in it, so it's straightforward. In other words, the script is in the middle of html code in the body of the page. (I know this is a terrible way of doing it, but I've got to try something to get this to work....)

According to firebug, it writes the external file where it should be (check!) and firebug shows me the contents of that file (check!), but ... it never 'writes' it onto the page...

The file just contains this:

document.write('<div id="shpblk" style="border:2px solid #ffa500;border-radius:7px;color:#000066;margin:5px;padding:5px;text-align:left;"><img border="0" width="12" height="12" src="/images/icons/store/icon_exclamation2c.gif">Hazardous conditions blahblah...  Potential delays and disruptions can be anticipated.</div>');

What am I missing?

Edit: some more clarification is necessary...:

Situation: I have to be able to put a piece of html on the page every now and then that creates a message.

Environment: What I have is a page that loads a header and footer first (which are set up in separate files) and then it takes a second or so to load the rest of the page. From what I understand, this "rest of the page" is written in a certain code, similar to javascript/jquery.

What I CAN do is: edit the files for the header and footer and put javascript in there to make modifications to the rest of the page. I can access some of the files that contain parts and pieces of the "rest of the page", but this is a huge pile of spaghetti.

What I've tried: Since I want to be flexible with the html that I need to put into the page, I preferably would like to create a piece of javascript or html or whatever on another site and have the "environment" pick up that code. I can do this with javascript or iframe. But since it's a secure area (https), I thought it would be best to use a javascript file instead of an iframe. So....

I created the javascript file and tried it out in a normal environment where I knew for sure it would work.. and it works like a charm. But when I tried this in the before mentioned "environment", I am running against a wall...

The javascript file has document.ready jquery statement in it and it would prepend the html div to an existing div on the page. This way it would load the page and write the page.. easy as pie.

However.. since the header and footer load first (which includes the external script file), and then the rest of the page, SOMEHOW the div where the script checks for DOES NOT EXIST YET. So I tried window.load instead of document.ready. Same result. Now, it WOULD appear ONLY when I refresh the page. So there may be a way to have it refresh the page, but I only want this as the absolute last attempt.

So then I tried to see if I could go around this by changing the script so that, instead of using a document.ready it would just do a simple javascript document.write statement. Then I call the script in the middle of the body of the page (I put it in one of the files that load in the middle of the page). I know this is not something I would do normally, but wanted to try it out anyway. So.... I would have something like this:

<div id="block1">
  <div id="block2">stuff here<div>
  <script type="text/javascript" src="https://someotherdomain.com/include.js" ></script>
  <div id="block3">stuff here<div>
  <div id="block4">stuff here<div>
</div>

Now when I run this, I do not get any errors, but nothing is being done with the contents of that js file. In firebug it shows me the contents of that file though.. so I assume it's being read. But I have no idea why it doesn't run.

Again.. back to 'normal' practices: I've tried window.load, because this would run the statement after the page loads, HOWEVER.. like I said before, I have the feeling it builds the contents of the (middle of the) page through this somehow and my script runs before this; it cannot find the div (block3) where it would prepend to. Whenever I stop running the page at my script, the div it's depending on doesn't exist yet...

I hope this made sense...

How are you injecting the document.write into the page? Server or client side? If client side, is it an async request for the file? Might there be a race condition that causes the write to fail? What happens if you insert the document.write in the page manually (skip the external load). Does that work? — Yogi
– Yogi, Commented Jun 5, 2015 at 22:57
@Roberto I "inject" through the external js file (see description above). If I take the code (whatever I have in the document.write) and simply put that into the page, everything works fine. — Malachi
– Malachi, Commented Jun 6, 2015 at 17:17

Yogi · Accepted Answer · 2015-06-06 22:10:01Z

Solution

For the external script file to work as expected, OP will need to load it using an asynchronous script tag like this:

<script type="text/javascript" src="include.js" ></script>

Yet, the file contains a document.write() statement, which is generally something to avoid. A better alternative would be remove document.write() from the file and save it as a plain HTML file. This could then be safely loaded using using jQuery:

$("#include1").load("include.html");

( Requires adding a target DIV to the page where the content should load. )

DETAILS

The question doesn't tell us how the external file is included on the page. And without that information it's difficult to understand the problem or provide a solution ... which is probably why this question has gone unanswered.

Yet, let's assume the the script is being injected into the page on the client side using JavaScript or jQuery. And if that's true then it will fail if not done the correct way.

Let's look at some ways we might add the script to the page:

These script tags will all fail because the file contains a document.write statement and the script is loaded asynchronously.

 <script type="text/javascript" src="include.js" async ></script>
 <script type="text/javascript" src="include.js" defer ></script> 
 <script type="text/javascript" src="include.js" async defer ></script>

The browser does load the file, but reports:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

This jQuery sort of works. It loads the script, but the document.write implicitly calls document.open, which erases the original content of the page. That's probably not what OP wants.

$.getScript('include.js');

This synchronous method works so long as the document.write is executed on load, i.e., is not inside function called later. So this is a possible solution for OP.

 <script type="text/javascript" src="include.js" ></script>

thank you for the great reply and for your patience! I feel I needed to clarify a little more what I tried and what the circumstances are, so I changed the text of the original problem. (couldn't fit this in a comment, so I had to change the original issue)

Collectives™ on Stack Overflow

Add script to script that contains document.write won't execute

1 Answer 1

Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related