My goal is to change a fill attribute in a polyline element in an svg sitting in a nested, same-domain, iframe.
When my page loads, I can see the content in the browser. In the chrome console, from javascript, I can access the nested iframe, and the div containing the svg.
document.querySelectorAll('iframe#my-frame')[0]
.contentDocument.querySelectorAll('iframe')[0]
.contentDocument.querySelector('#mydiv')
but the content of that div is evidently not in any dom that I can interrogate. The div is effectively empty, even though it's content is rendered in the browser.
<div id="mydiv"></div>
When I right-click > 'Inspect' the nested iframe, the devtools redirect to the body element of the iframe#document. I am now able to interrogate the div, and manipulate the svg elements' attributes. At this point I can no longer interrogate the parent page, because the window object is now the nested iframe itself--this is not unexpected.
But I can't reset window programmatically, I don't think, i.e., this doesn't work:
window = document.querySelectorAll('iframe#my-frame')[0].contentDocument.querySelectorAll('iframe')[0].contentWindow
Is there a way to programmatically change focus or window of the javascript running in the browser--what I assume is forcing the iframe content into the dom in order to manipulate a css attribute after page load? Remember this is not an iframe domain issue.
You can't access the iframe's content instantly
You need something like a load eventListener to wait until the <iframe> content is fully loaded.
const myFrame = document.querySelector("#my-frame");
myFrame.addEventListener("load", (e) => {
// content loaded - query and manipulate elements
let doc = myFrame.contentDocument;
let iframeSvg = doc.querySelector("svg");
let svgEl = iframeSvg.querySelector("rect");
svgEl.style.fill = "green";
});
Related
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() )
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>
According to this answer:
Invoking JavaScript code in an iframe from the parent page
I have an iframe that loads a page that has a div with the id flash_container
<iframe src="http://www.remote.com/a.html" id="iframeID">
I placed this code on my parent page (the page that loads the iframe) but it doesn't seem to work:
document.getElementById('iframeID').contentWindow.targetFunction();
function targetFunction() {
var el = document.getElementById('flash_container');
el.style.zoom = 0.7;
el.style.MozTransform = 'scale(0.7)';
el.style.WebkitTransform = 'scale(0.7)';
}
What I'm trying to do is to zoom-out the inner page inside the iframe from the parent page.
It's impossible to say for certain what's wrong, but I have some ideas you might want to look into.
Make sure that the iframe is loaded. Trying to do something inside a frame that hasn't finished loading clearly won't work
Are you sure that you don't have cross-domain problems. You cannot manipulate the contents of a cross-domain iframe.
Actually you could, if both side (your page and the page in the iframe) agree on sharing information, you could use message passsing. See https://stackoverflow.com/a/7938270/1571709
From Geek Daily :
The onload event does not fire until every last piece of the page is loaded.
Now I have a inframe in my jsf application and I can not replace by any means, this iframe with any other jsf component. I am trying to set the scroll position of the scrollbar resides in that iframe to a particular coordinate when the iframe is loaded. I have tried this:
window.onLoad(onLoad);
function onLoad() {
var frames = window.parent.frames;
var iframe = frames['frameR'];
iframe.contentWindow.scrollTo(0, 200);
}
But it's not working. I placed an alert(iframe) after var iframe = frames['frameR']; and it was displaying a message [object Window] but iframe.contentWindow.scrollTo(0, 200); is not working at all.
Either I am doing something wrong or as all the jsf components are not rendered in the iframe, the iframe's scroll position can be set then.
Is there any way to achieve this functionality?
Is onLoad is the last event before render of all the components?
The method you are looking for is window.onload, note capitalisation.
It is best to set the frame's onload listener from the code going into the iframe. It can be done from the parent document, but if you wait for the main document's load event to make sure the iFrame exists, the iframe's load may have already fired.
You can also use a script element immediately below the iFrame to set it's onload property:
<iframe id="frameR" src="..."></iframe>
<script>
var el = document.getElementById('frameR');
if (el) el.onload = doStuff;
</script>
I want to be able to remove an iframe from within itself. The iframe is created dynamically and the content is loaded with 'src'.
I create my iframe like this:
var i = document.createElement('iframe');
i.id = 'proxy_frame';
i.name = 'proxy_frame';
i.setAttribute('src', url);
document.body.appendChild(i);
Then from within 'url' I want to be able to remove/close the iframe.
Before loading the data into the iframe with src I used document.write:
window.frames['proxy_frame'].document.write(html);
and then I was abloe to remove the iframe with:
window.parent.document.getElementById("proxy_frame").parentNode.removeChild(window.parent.document.getElementById("proxy_frame"));
But this does not work with 'src'.
Note: This is for a bookmarklet so I don't want to use jQuery or another library.
Define a method in your parent page
function removeElement() {
var d = document.getElementById('body'); // or any other parent element
var proxy_frame = document.getElementById('proxy_frame');
d.removeChild(proxy_frame);
}
To call this method from your iframe simply use this
Remove me
For local domain iframes you don't need to rely on ids.
window.parent.document.body.removeChild(window.frameElement);
window.frameElement has reasonable support https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement
You can't access the parent page as long as it's in a different domain.
Set up a page in your site that can be used to remove the iframe, then in the iframe you just go to that page.