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