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
Related
I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};
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.
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'm using an Iframe to have an html file work on a homepage when someone clicks on a link. When I use the html file by itself as a webpage, things like multiple key depressions and such work and are accessible. But they aren't when I access the html via an iframe.
Is this even possible?
Edit
Oh, I have a function in my main.html file, which detects key depressions and plays video files based off of key presses (it's a psuedo video game). It uses eventlisteners and objects to detect positions of keys. But again, this doesn't work when I view it in an iframe from some other html page, index.html
First off, if your iframe and parent are on different domains, you're going to have some security issues that you may/may not be able to get around (read Cross-Domain Communication with IFrames).
As for how to access your iframe's events from the parent.
See:
Adding an event listener to an iframe
Add event to iframe body
Adding click event handler to iframe
Adding event handler to an iframe using JQuery
EDIT: Should mention that your question is a bit ambiguous, so I'm kind of shooting in the dark here with this answer.
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 ;)