Dynamic inject of code into iframe - javascript

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();

Related

Replace document.write to place HTML content inside an iframe

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>

Remake page while loading

I'm writing an extension for chrome. The problem is I need to insert an iframe of loading page into DOM instead of loading itself.
Here is a code of the content script which is not working:
window.stop();
var body = document.createElement("body");
body.src = window.location.href;
document.documentElement.appendChild(body);
Why browser generate body in DOM but don't show it on the page?
Have got no idea why is it happen, but window.stop blocks the DOM from changes after calling. In order to reset this state I should do this:
document.documentElement.innerHTML = "";
And as a bonus head and body will be appended automatically)

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 doesn't change iframe src (using Bootstrap frontend)

I am using the following JavaScript (in the script tag in head) to modify an iframe's src when a link is clicked.
function switchView() {
document.getElementById("project-view").src = 'projects/3dpool.html';
}
My iframe is written as
<iframe id="project-view" src="projects/fallingballs.html" onload="resizeIframe(this);" scrolling="no"></iframe>
The link that changes the iframe is:
3D Pool
Adding a log statement like document.getElementById("project-view").src after the src change shows that the src has actually changed but no changes show up.
I have tried removing the unload tag from the iframe but it doesn't help.
Typing out the code in the switchView() function in the web console works
Change your link to look like the following:
3D Pool

GetElementById form a "master" inside an iframe

Ok this is in javascript, so I have a iframe inside a contente place holder of a master page.
Something like this.
1-MasterPage
2-contentePlaceHolder
3-Iframe
When i'am in the iframe how do I get a control with "GetElementById" from the masterPage??
Unfortunately, you cannot. Your iFrame is unaware of the master page holding it.
If both your parent page and iframe src are on the same domain then using JQuery you can do something like this from the iframe's src page:
$(parent.document).find('#myElement').hide('slow');
Try this :
Provided that masterpage and iframe src belong to same domain , let's say you have a button in iframe , on 'onclick' event of that button write this code :
var P = parent.document.getElementById("element_id") ;

Categories