为iframe添加鼠标事件
生活随笔
收集整理的這篇文章主要介紹了
为iframe添加鼠标事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、關于iframe標簽
使用iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）。所以我們可以使用iframe標簽，在一個頁面嵌入另一個頁面。通過指定iframe的src為另一個頁面的路徑，從而達到這個需求。然而iframe卻不支持有些事件，比如鼠標的mousemove事件。對于這個需求，我們只有通過另外一種方式達到。
2、解決方法
現在有兩個頁面一個是index.html頁面，另一個是page.html。我們需要在index.html頁面中通過iframe引入page.html。并且需要為iframe的區域 添加鼠標的mousemove事件。
思路如下：
a、先將iframe放在一個div(div1)里面，將這個div的index-z值設置成1.
b、在頁面中再添加一個div(div2)，將這個div覆蓋整個頁面，并且為透明，index-z值設置比1大。
這樣我們只需監聽第二個div的鼠標事件即可，在鼠標事件觸發的函數里面做處理。
當鼠標事件觸發后，把div2的display設置成block，當函數處理完成之后，又將div2的display設置成none。這樣基本滿足需求。
3、相關代碼
index.html代碼：
1 <html> 2 <head> 3 <title>Demo</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 5 <script type="text/javascript" src="script.js"></script> 6 </head> 7 <script type="text/javascript"> 8 var containerdiv; 9 function div_mousemove(){ 10 containerdiv = document.getElementById("container"); 11 containerdiv.style.display = "none"; 12 alert("onmousemove"); 13 containerdiv.style.display = "block"; 14 } 15 </script> 16 <body > 17 <div id="container" onmousemove="div_mousemove();" style="background:rgba(250,0,0,0);width:100%;height:100%;position:absolute;"></div> 18 <div id="ar" style="background-color: green;index-z:1" > 19 <iframe id="showwin" frameborder="0" style="background-color: red" scrolling="no" width="100%" height="100%" ></iframe> 20 </div> 21 </body> 22 </html>page.html代碼：
1 <html> 2 <head> 3 <title> New Document </title> 4 <meta name="Generator" content="EditPlus"> 5 <meta name="Author" content=""> 6 <meta name="Keywords" content=""> 7 <meta name="Description" content=""> 8 </head> 9 <body> 10 this is iframe area 11 </body> 12 </html>同理鼠標的其他事件可以用這種方式來實現。
轉載于:https://www.cnblogs.com/always-online/p/3476892.html
總結
以上是生活随笔為你收集整理的为iframe添加鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 1008 Elevator
- 下一篇： 关于wpf窗体中Allowtranspa