开发者

How to let the iFrame accept ondblclick event?

开发者 https://www.devze.com 2023-01-29 22:43 出处:网络
I check out the w3school , and it shows that the ondbclick event is "Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.".

I check out the w3school , and it shows that the ondbclick event is "Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title."...

开发者_如何学PythonBut I really want to do something when the iframe is being dbclick, how can I do so?

W3School reference: http://www.w3schools.com/TAGS/ref_eventattributes.asp


Observe the load-event of the iframe and once it fired you can assign the ondblclick to the document inside the iframe.

<iframe src="some.htm" 
        onload="this.contentWindow.document.ondblclick=function(){alert('it work\'s');}">
</iframe>

Note: this will be restricted by same-origin-policy, if the document inside the iframe is on another (sub)Domain than the parent window.


This is possible using CSS trick: put empty div on top of the iframe and catch the double click event of that div element. Here is the code required:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 100;">
        <iframe src="myotherpage.html" width="500" height="300"></iframe>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; width: 500px; height: 300px; z-index: 999;" ondblclick="alert('frame double clicked');"></div>
</div>

The "heart" of this is setting the z-index of both, with the DIV having bigger value and of course having them both the same size.

Using jQuery it should be pretty simple (though not trivial) to make it "generic" by adding the extra div on page load and applying the required CSS on the fly.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号