Replace document.write to place HTML content inside an iframe - javascript

I have a JavaScript script (no plugins, just pure JS) that creates an iframe element in the body of the page, and inside this iframe is placed a huge HTML to be displayed in this iframe.
This script uses document.write to write this content to the iframe, however, performance tools report that this procedure is too slow to load the page.
Below is my code:
var body = document.getElementsByTagName('body'),
iframe,
container;
container = document.createElement('div');
container.id = 'iframePlaceholder';
iframe = document.createElement('iframe');
iframe.id = 'myPageIframe';
iframe.name = 'page-content-frame';
iframe.allowfullscreen = true;
container.appendChild(iframe);
body[0].appendChild(container);
iframe = document.getElementById('myPageIframe');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<html><body>content........<script src="..."></script></body></html>');
iframe.contentWindow.document.close();
What can I do to avoid using document.write without having to rewrite all my HTML in DOM?
Is it possible to convert this HTML string into a DOM element and add it to the iframe?
Edit:
The content loaded by the iframe is dynamic, so it is not possible to place an HTML file to be loaded by the iframe's SRC.

Perhaps you can try placing the HTML content inside a new file and add the name of the file to the src attribute of the iframe.
Something like the following:
<iframe id="myPageIframe" name="page-content-frame" src="newfile.html"></iframe>

Related

Dynamic inject of code into iframe

i'm tring to build my own ads netowork, but i am stuck in days at the same point, how can i dynamical inject content (Like images or gif), into an iframe, and keeping everytime the same src attribute (<iframe src="http://example.com/iframe.js" </iframe>) attribute? I tried everything with php but nothing work.
To add content into an iframe, you can do something like:
var doc = document.getElementById('yourIframe').contentWindow.document;
doc.open();
doc.write('Some test content');
doc.close();

Resetting CSS properties in bookmarklet

I'm trying to attach new <div> element with some content via bookmarklet and add some inline CSS.
The problem is that the CSS from the main page usually affects this div too.
What would be preferred approach to ensure that my styles from bookmarklet are always more important that the ones from any parent page?
The most trustworthy solution would be to set all possible CSS properties for each element inside the div. Is this wise? Where can I get the list?
I've found cleanstate.css which may do the reset.
Maybe some js solution would work better? Eg. detect which styles has been aplied by the main page, and reset them to default values? I'll have jQuery available in this bookmarklet anyways.
The reliable solution would be iframe.
You can create it dynamically and assign content using 'javascript:' protocol in src tag.
var iframe = document.createElement('iframe');
iframe.src = "javascript:'<div> Yours Content </div>'";
document.body.appendChild(iframe);
Or you can insert empty iframe, wait it to be loaded and modify iframe document as required. For example:
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
document.body.appendChild( iframe );
iframe.onload = function() {
iframe.contentWindow.document.body.innerHTML = '<div> Yours content </div>';
};
Alternatively, you can create separate .html page and insert it as iframe. <iframe src="http://example.com">Although, you will need to host page somewhere and document won't be able to access parent page without additional scripting. ( .postMessage() )

JavaScript - trouble accessing DOM of dynamically generated local iframe

I'm having trouble accessing the DOM of an iframe content document if I create the iframe dynamically in JavaScript rather than hard-coding it in the HTML.
I'm finding this so far testing in Mac FF26 and Safari 6. It is a local iframe document on the desktop, so there should be no cross-domain issues.
The iframe I generate appears normally in the browser window. But trying to access it with contentDocument, the body element seems to be empty.
Is this a known issue? Perhaps I'm generating my iframe in an unusual way:
var newIframe = document.createElement("iframe");
newIframe.id = "generatedIframe";
newIframe.src = "test.html";
document.body.appendChild(newIframe);
var iframeTag = document.getElementById("generatedIframe");
// the iframe will be appearing normally in the browser now
// but this fails -- innerHTML is empty string:
var iframeContent = iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML;
// same reference code works if the iframe is hard-coded in HTML instead
In fact your problem is not the way you generated your iframe.
The iframe DOM is only available after it has been loaded.
The code behind illustrates what I mean :
In your parent window container :
<script>
function doSomething() { alert(iframeTag.contentDocument.getElementsByTagName("body")[0].innerHTML()); }
</script>
In your iframe document
<body onload="window.parent.doSomething();"></body>

calling javascript from js file

I have elements on my parent page that changes only if hidden iframe within contain one div id.
Everything is fine if I let code on html page :
<iframe id="myiframe" style="display:none" onload="load()" name="myiframe" src="mysite.com"></iframe>
JavaScript:
function load(){
if (window.frames[0].document.getElementById('applications'))
{
var str=document.getElementById("tst").innerHTML;
var n=str.replace("Login","Logout");}}
document.getElementById('tst').href='logout';
But I need iframe code deleted from html file and relocated js file.
I use this code in js file to trigger iframe:
window.onload = function(){
var link = "iframelink"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.addEventListener("load", load);
iframe.setAttribute("src", link);
document.getElementById("ad54").appendChild(iframe);
}
html code to get iframe:
<div id="ad54"</div>
Iframe launches, but right now I get no elements changed on parent page although iframe is triggered . When iframe is loaded I need those changes to take place in parent page.
<div> elements do not load external content, so they never fire load events.
You appear to be trying to fire the event when the iframe content loads. You need to attach your event listener to the iframe.
iframe.addEventListener("load", load);
iframe.setAttribute("src", link);

Creating iframe by javascript

I have a main page that include a javascript that was creating an iframe dynamically same below:
<script>
document.domain = "mydomain.com"
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
// creating other element in ifram dynamically
</script>
But in IE I kept receiving a security warning because of document.domain = "mydomain.com" (I need document.domain and I can not remove it).
I found a solution for IE8. this is the solution :
var u = 'javascript:(function(){document.open();document.domain="mydomain.com";document.close();})()';
iframe.src = u;
But it does not work on IE6. Is there any solution for my problem?
Note: I want to create other element in iframe by script and I want to load the content of iframe by src.
Create the iFrame using innerHTML.
Write the full HTML for the iFrame including the SRC attribute. Then find your element and set innerHTML to the string with the iFrame source.

Categories