Create divs in iframe

Question

Hi,

I was unable to find a solution to the following problem: I want to display any website in an iframe and add elements (divs) to this iframe. Due to the cross-scripting prevention in the browser this seems to be not possible.

Is there any way to do this?

Answer 1

If you do not actually host the domain in the iframe, no. Best you can do is have a server-side proxy page which copies the html and inserts divs.

Answer 2

Cross-domain scripting rules explicitly prevent this. Even if you find a solution now, i'd be concerned about it in future, it's likely a hack. If you don't own/host the domain in your iFrame, it is forbidden.

A proxy or facade application that manipulates the HTML and serves that up might be possible, but I can't imagine it's easy.

It's likely that this is of no use to you, but the only sanctioned method I know of is to use HTAs, so if your application is running in a trusted environment (like a company intranet, or a kiosk, etc), you can take the HTA approach: http://msdn.microsoft.com/en-us/library/ms536496%28VS.85%29.aspx

Personally HTAs give me the creeps.

Answer 3

If you could do that, you could easily load any webpage into the iframe (possibly a website where the user has logged in) and extract content from there.

Putting the topic of security aside, there is another problem with your code: you need to create the element within the iframe's document, not the current document, and once again append it to the iframe's document, not the iframe object itself:

function addDiv() {
    var doc = myFrame.contentDocument,
        newdiv = doc.createElement("div");
    newdiv.innerHTML = "foo";
    doc.appendChild(newdiv);
}

Answer 4

What is your goal?

If you want to reformat the content or run scripts on their page then you probably need to proxy and copy the html (as meder suggested)

If you simply want to overlay or "insert" something in their page you can try placing a div on your own page and settings its position over top of the iframe where you want it.

I've had to do this to stick iframes over swf files before.