document.write in jsonp callback

Question

I am making a cross domain request using script tag hack and jsonp. In the callback function, I want to write the data received to DOM using document.write().

I know that I should use appendChild/innerHTML instead of doc.write(). My constraint is I do not have a class/id hook to the element I want to write to. I can only rely on document.write() to write "in place".

Following code is included in HTML div in a script tag.:

function request_jsonp(){
var script = document.createElement('script');
var server_path = 'http://somedomain.com/?q=querystring&callback=request_callback';
script.setAttribute('src', server_path);
document.getElementsByTagName('head')[0].appendChild(script);
console.log('data requested');
// document.write('hello world'); // this gets written
}


function request_callback(data){
    console.log('data received');
    document.write(data);
}


 request_jsonp();

 window.onload = function(){
     console.log('onload fired');
 }


/* 
above code prints

data requested
data received
onload fired
*/

Basically document.write does not work even with a static string inside the callback function. I thought that if document.write is called before onload, it inserts text in the page as noted here JavaScript and HTML Script Tags

What is preventing the document.write() to write to DOM? Also, is there a better approach to do this?

"I do not have a class/id hook to the element I want to write to." -- then send it via GET param of jsonp. — kirilloid
– kirilloid, Commented Dec 28, 2011 at 13:29
I think I did not make myself clear. To send it via GET, an id/class needs to be present on the element in first place. — Yogesh
– Yogesh, Commented Dec 28, 2011 at 14:12
You may use just an index among all other elements like: Array.prototype.indexOf.call(document.getElementsByTagName('*'), element) — kirilloid
– kirilloid, Commented Dec 28, 2011 at 14:48

Milad Naseri · Accepted Answer · 2011-12-30 18:38:38Z

1

You should note that document.write(); calls an implicit document.open();, thus, in effect, clearing everything you have had in the document so far. It is impossible to add content to a document using document.write();. It is, however, possible to use document.write(); to write an entire document.

You have several possible solutions:

You can pass the target element as a GET parameter, as @kirilloid noted.
You can insert an IFrame object at the desired place, and use myIFrame.document.write(); to update its content.

This is basically happening because you are updating the content of a container that is the parent to your script code, and as such, is not closed yet.

Either that, or I'm entirely off track here which, let's face it, is entirely possible. ;-)

edited Dec 30, 2011 at 18:38

answered Dec 28, 2011 at 13:47

Milad Naseri

4,1281 gold badge30 silver badges40 bronze badges

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

3 Comments

Yogesh Over a year ago

"You can insert an IFrame object at the desired place" How do I do this? I do not have an id/class hook to the parent div in which I need to insert iframe. Basically I want to say this.parentNode.appendChild(myIFrame)

Milad Naseri Over a year ago

You are right. That couldn't work, without knowing the target element. You can always include the code for document.write(); in your included script file. That way, the writing block won't be executed until after the container is closed.

Milad Naseri Over a year ago

It should also be noted that your callback function resides on the client side of the JSONP pattern, and as such should be aware of the specifics of the page you are creating via JSONP. If not, you should revise your design.

Collectives™ on Stack Overflow

document.write in jsonp callback

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related