CODEWITHSUNDEEP
javascriptjqueryiframe
user1032531
user1032531

Reputation: 26281

Populate IFRAME from the client

I know a IFRAME can be created using JavaScript.

Can the body HTML also be specified by the client, and also associated JavaScript on the IFRAME as well as CSS?

Upvotes: 1

Views: 134

Answers (2)

Pantelis Natsiavas
Pantelis Natsiavas

Reputation: 5369

You want to have a page looking like this (abstract):

<html>
...mypage header...
<iframe src="otherpage.com" class="myclass" />
...mypage footer...
</html>

Right?

Using javascript, you could alter anything except the content of "otherpage.com". You could change the class of the iframe etc. I would suggest using jquery because it provides easy ways to manipulate the HTML DOM.

If you want to change the look of the iframe content, then you could do it but I would strongly advise against it. If you decide to do it, you could check this post explaining how to do it with jQuery. You could also check this post which I copied this source from:

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

I suppose things are not that easy on javascript. Due to security reasons, you are not able to execute javascript hosted on the parent site side in order to affect the iframe target. If you have the target site under your control, then you could use some cross domain communication (you could see this post) but this is not a trivial task either.

In general, manipulating the iframe content means that your system's functionality depends on another system's functionality upon which you have no control whatsoever. You understand that when you do this, you put a very heavy dependency on your system. If something changes on the iframe content, then your code depends on it. I would strongly discourage you to follow this path.

Hope I helped!

Upvotes: 1

Sho
Sho

Reputation: 294

I am not sure whether I understand your question correctly or not.

We can get the iframe document by calling

iframeEl.contentWindow.document

Then we can control the html, css inside it.

Be careful about the same origin policy:

We can only control the iframe the same origin as the main page.

Upvotes: 2

Related Questions