At some point I change an iframe src in order to download a file:
document.getElementById('download_frame').src = "file.zip";
I need some kind of callback to execute when the iframe has completely reloaded (in this case when the file is completely downloaded). I tried:
<iframe id="download_frame" style="display: none;" onload="console.log('load1');">
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log('load2');
});
</script>
</iframe>
but they are never fired...
Any suggestion?
<iframe> tag does not accept a body as scripting (body is alternative content).
You cannot control when a certain file has been loaded because the target of that iframe gets your file thus no any other headers can be sent.
You can try different solutions achieving what you want, for example: Detect when browser receives file download
I did not mark this question as duplicate because it lacks the explanation for iframe scripting.
Related
For one of my Chrome extension project, I fetched the HTML content of another webpage in an <iframe> tag of the current webpage, by populating its src attribute dynamically. Now, I want to scrape a few values from inside the <iframe> tag. But the jQuery always shows this <iframe> tag as empty. The reason I am using is that there are a few JavaScript files inside the fetched page that I want to get executed before I start scraping. I also tried to set wait timers, but jQuery always shows <iframe> tag to be empty (though the src attribute is set).
Upon investigation, I found that the <iframe> has a strange #document value inside it, followed by the normal HTML tags. I wonder if this is the reason why the jQuery is unable to recurse through a DOM hierarchy inside the <iframe> tag.
See below screenshot of the "inspect" view of the desired <iframe> tag.
Also, the main webpage on which the <iframe> tag exists is on the same website as the newly fetch page url (albeit a different subdomain). And I'm not getting any access permission warnings in Chrome, so I do not suspect this to be a cross-domain issue.
Edit:
Even after 10 seconds wait:
console.log($("#insertHere").text());
returns empty. And,
console.log($("#insertHere").parent().html());
returns: <iframe id="insertHere" src="/courses/intro..." style="width:0;height:0;border:0; border:none;"></iframe>
You can grab iframe content with such code :
$('#insertHere').contents().find("html").html();
$('#insertHere').contents().find("#MathJax_Message").text();
If the iframe is on another domain (seems to not be in your case), cross-site-scripting (XSS) protection of your browser will block it.
The #document is a page document object for the iFrame DOM.
Try accessing the document of the iframe, e.g.
var frame = document.getElementById('#hidden-frame');
console.log(frame.document.body);
You could also try using a Content Script and allowing it in all pages with <all_urls>, which should be loaded with the iframe content, and use it to send the content to background script using messaging.
I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)
I have 2 questions :
How do I know that the contents of the frame ready/loaded (as $(document.ready()))?
How do I know that the popup (window.open()) contents ready/loaded (as $(document.ready()))?
Google said that could help $("iframe").load(), but I did not understand how
DEMO — iframe
The problem with using load() is the iframe may have already loaded before the jQuery has run, thus not triggering the function. One way around this would be to initially load nothing in the iframe (about:blank), then using jQuery to change the src attribute to get the iframe to point to the desired location.
DEMO — window.open (Disable your popup blocker for this demo.)
I'm not sure whether ready() can be used cross-domain. When loading a popup/iframe on the same domain, a script on the child page can be used to report back to the parent window that it is "ready".
The load callback will be called when the iFrame will be load :
$("#iframe-id").load(function(){
//The iFrame content is loaded
})
I am playing around with events and I am trying to make an event that is triggered when text in my iframe is highlighted. I thought I might try to use the onmouseup event:
<div id="instapaper_div" onmouseup="handleEvent(event)">
<iframe id="instapaper" src ="http://www.instapaper.com/m?u=<%= #content %>" width="90%" height="90%"></iframe>
</div>
<script type="text/javascript">
function handleEvent(oEvent) {
alert("Event!!")
}
</script>
The <%= #content %> is a properly working piece of embedded Ruby in case anyone was wondering what that was, but it's not relevant to the question here.
If I click anywhere outside of the iframe on the web page (this div section is the entire body of my overall html file which isn't posted here), it correctly displays the alert "Event!!". However, if I click inside the iframe, which is where I want the event to actually occur, nothing happens. How do I get it to register this event inside the iframe? I tried using onmouseup inside the iframe tag but that did not work. Also, if onmouseup is not the best way to recognize a "text highlighted" event for the iframe which is what I want, what event should I be using and how do I use it?
You can't detect the event because your iframe comes from a different domain, so the same-origin policy applies.
Basically, the SOP means you can't interact with the DOM of anything loaded from a domain other than your own.
(I'm assuming you're not serving your site from instapaper.com. If you are, then you should be a able to detect an event in an iframe loaded from instapaper.com.)
https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript
I have a page named somepage.html and the page otherpage.html as iframe in somepage.html
the source of somepage.html is
<body><iframe src="otherpage.html name="frame"></body>
The source of otherpage.html is
<body onload="somefunction()" onunload="otherfunction" >the other content here</body>
I want to disable the onload function without touching the code of otherpage.html(iframe). I want to disable it on somepage.html
Thank you in advance
In IE you can use the security="restricted" attribute. It doesn't do what you want (disable javascript altogether) but should force the IFRAME to run in a differnent zone and prevent it from accessing your page.
The HTML 5 sandbox attribute, when implemented, may also be close to what you are looking for. In particular allow-scripts. Now you just need it to be implemented in a majority of user's browsers ;)