iframeにマウスイベントを追加
10735 ワード
1、iframeタグについて
iframe要素を使用すると、別のドキュメントを含むインラインフレームワーク(行インラインフレームワーク)が作成されます.iframeラベルを使用して、あるページに別のページを埋め込むことができます.iframeのsrcを別のページへのパスとして指定することで、この要件を達成します.しかしiframeでは、マウスのmousemoveイベントなどのイベントはサポートされていません.この需要に対して、私たちは別の方法で達成するしかありません.
2、解決方法
2つのページがあります.1つはindex.htmlページで、もう1つはpage.htmlです.index.htmlページでiframeを介してpage.htmlを導入する必要があります.さらにiframeの領域にマウスのmousemoveイベントを追加する必要があります.
考え方は以下の通りである.
a、iframeを一つのdiv(div 1)に入れて、このdivのindex-z値を1に設定します.
b、ページにdiv(div 2)を追加し、このdivをページ全体を上書きし、透明にしてindex-z値を1より大きく設定します.
これにより、2番目のdivのマウスイベントを傍受するだけで、マウスイベントがトリガーする関数で処理できます.
マウスイベントがトリガーされるとdiv 2のdisplayをblockに設定し、関数処理が完了するとdiv 2のdisplayをnoneに設定します.このように基本的に需要を満たす.
3、関連コード
index.htmlコード:
page.htmlコード:
同じマウスの他のイベントは、このような方法で実現できます.
iframe要素を使用すると、別のドキュメントを含むインラインフレームワーク(行インラインフレームワーク)が作成されます.iframeラベルを使用して、あるページに別のページを埋め込むことができます.iframeのsrcを別のページへのパスとして指定することで、この要件を達成します.しかしiframeでは、マウスのmousemoveイベントなどのイベントはサポートされていません.この需要に対して、私たちは別の方法で達成するしかありません.
2、解決方法
2つのページがあります.1つはindex.htmlページで、もう1つはpage.htmlです.index.htmlページでiframeを介してpage.htmlを導入する必要があります.さらにiframeの領域にマウスのmousemoveイベントを追加する必要があります.
考え方は以下の通りである.
a、iframeを一つのdiv(div 1)に入れて、このdivのindex-z値を1に設定します.
b、ページにdiv(div 2)を追加し、このdivをページ全体を上書きし、透明にしてindex-z値を1より大きく設定します.
これにより、2番目のdivのマウスイベントを傍受するだけで、マウスイベントがトリガーする関数で処理できます.
マウスイベントがトリガーされるとdiv 2のdisplayをblockに設定し、関数処理が完了するとdiv 2の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>同じマウスの他のイベントは、このような方法で実現できます.