[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1907
  • Last Modified:

"mouseup" event lost when cursor moves off edge of iframe! how to capture it?

Click on iframe border without moving mouse, and you can see you get correct mouseup and mousedown firings.

(Box in upper left corner reports what's going on.)

But now click on iframe border, move mouse inside iframe while you keep button down, then release button.  When you do this, the iframe never gets the mouseup firing.

How can I capture the mouseup even when the mouse has strayed inside the iframe?

Or can I somehow make the iframe "all of a piece" -- the elements inside not behaving seperately? If that makes any sense.

And yes, it has to be an iframe, and the "src" must be served from the web.

Thank you.

begin html:
<html>
<head>
<script>
function onDown(e){
document.getElementById('report').innerHTML = 'mouse down';
}

function onUp(e){
document.getElementById('report').innerHTML = 'mouse up';
}

</script>
</head>
<body>
<div id="report">waiting...</div>

<iframe id="main" onmousedown="onDown(event)" onmouseup="onUp(event)" style="width:400px;height:200px;border:3px solid blue;"  src="http://www.wikipedia.org/" >
<p>Random stuff contained in iframe here.</p>
</iframe>

</body>
</html>

p.s. Here is a very clever solution provided by an expert here; unfortunately it does not work when the iframe src is from the web.  it does work when the iframe src is on your hard drive. I'm sure there is a very good reason for this.  I just don't know what it is. :)

<html>
<head>
<script>
function init(){
  x = document.getElementById('main');
  z = document.getElementById('report');

  document.onmousedown =
  x.contentWindow.document.onmousedown = function() {
    z.innerHTML = 'mouse down';
  }

  document.onmouseup =
  x.contentWindow.document.onmouseup = function() {
    z.innerHTML = 'mouse up';
  }

}

</script>
</head>
<body onload="init()">
<div id="report">waiting...</div>

<!--
     locally sourced iframe works.
     for example, the following works
     (must be the only iframe with id "main" in the doc, of course)
-->
<iframe id="main" src="testIframe.htm" ></iframe>


<!--
      iframe sourced from the web,
      like this, does NOT work.
-->
<!-- <iframe id="main" src="http://www.wikipedia.org/" ></iframe> -->

</body>
</html>


content of testIframe.htm:
<html>
<head>
</head>
<body>
<h1>heading</h1>
<p>
paragraph text here
</p>
</body>
</html>

0
mtnr
Asked:
mtnr
2 Solutions
 
thirdCommented:
for security reasons, framed pages from other sites are not allowed to be manipulated including with just mouse events.
0
 
jessegivyCommented:
Yes, yes, these security "features" are all too helpful aren't they?  What event are you triggering onmouseup?  First of all I wanted to say that the behavior you're talking about doesn't sound very intuitive at all.  The idea I had was to use opacity and float another element over your iFrame, then when mouseup occurs you'll not actually be clicking on a page outside your own, but it will appear that you are.

does the mouseup functionality use the content from the iFrame?
0
 
mtnrAuthor Commented:
thanks for your replies.  I'm not attempting to manipulate the content of iframe, only the iframe itself.  For instance to drag or resize.  Losing the mouseup event some of the time makes it impossible to provide consistent behaviour.

Seems like the "other domain" rule shouldn't apply to elements that are actually part of the parent doc. That is, the iframe belongs to the parent doc, the user should be able to adjust its position/appearance, with no harm done to the document contained in iframe.

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now