2017-07-21 16 views
7

私のウェブページのdiv内に外部ウェブページ(この例ではwww.duckduckgo.com)を読み込んでいます。 divの内側と外側にあるマウスのXとYの位置を取得したいのですが、divの内側にあるときに、ウェブページがonmousemoveイベントの発生をブロックしているようです。ただし、div32に入るとonmouseoverイベントは1回だけ発生します。ここで onmousemoveイベントは外部ソースから発生しませんか?

は私の問題を説明するサンプルコードです:

function mouseEvent(event) { 
 
     var x = event.clientX; 
 
     var y = event.clientY; 
 

 
     document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y; 
 
}
html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%;   
 
    overflow: hidden; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-right: 0px; 
 
} 
 
#form1 { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#pageDiv { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#page { 
 
    height: 100%; 
 
    width: 100%; 
 
}
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
     <div id="pageDiv"> 
 
      <label id="label">hello</label> 
 
      <object id="page" type="text/html" data="https://duckduckgo.com/" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)"> 
 
      </object> 
 
     </div> 
 
    </form> 
 
</body> 
 
</html>
私はすなわちだけでなく、divの保持の上に(どこでも、このWebページ上でマウスXとYの位置を取得できますか

外部ソース)? mouseEvent関数の先頭にevent.preventDefault();を追加しようとしましたが、これは何の助けにもなりませんでした。

外部のウェブページが私のフォーカスを盗んでいると推測しています。を離れています。これは本当ですか?とにかく、私は一定のX座標とY座標を更新できますか?

+0

手を貸すことができwindow'代わりに 'にイベントを接続します。同じ原点のポリシーが汚染されたオブジェクトからのイベントを防ぐことができます。 – adeneo

+0

@adeneoそれは仕事ではありません。私は次のコードを '$(window).mousemove(mouseMove(event));'というHTML文書のスクリプトセクションに追加しました。問題はまだ存在します。 –

+1

[この回答](https://stackoverflow.com/a/5261351/1009922)をご覧ください。私が理解しているように、あなたは「不運」状態に陥っているかもしれません。 – ConnorsFan

答えて

3

function mouseEvent(event) { 
 
     var x = event.clientX; 
 
     var y = event.clientY; 
 

 
     document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y; 
 
} 
 

 
function removeCheat() { 
 
    // remove cheat div or remove right/bottom position. 
 
    // Not sure what your ultimate goal is. 
 
}
html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%;   
 
    overflow: hidden; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-right: 0px; 
 
} 
 
#form1 { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#pageDiv { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#page { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#cheat { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="cheat" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)" onmousedown="removeCheat()"></div> 
 
    <form id="form1" runat="server"> 
 
     <div id="pageDiv"> 
 
      <label id="label">hello</label> 
 
      <object id="page" type="text/html" data="https://duckduckgo.com/"> 
 
      </object> 
 
     </div> 
 
    </form> 
 
</body> 
 
</html>

+0

マウスのクリックがオブジェクト(つまりiframe)にスローされない限り、これは素晴らしいことです。もう一度 "duckduckgo"ウェブサイトをクリックすることはできません。あなたはもうウェブサイトと対話できません。私はそれを使って遊んでいきますが、あなたもこれを行うことができれば、あなたの答えを解決策として受け入れます。 –

1

ITは###

機能しない理由のiframeまたはオブジェクトがあるように設計されているので、

...私はあなたのために、これはストレートましょう単純なワームホールあなたのウェブサイトから要求されたソースに、彼らは独自の機能とオブジェクトを持っています!

あなたがワームホールと対話する可能性なしにカーソルの軸を決定するために再生することができますトリックがたくさんあるが、あなたはそれと対話したくない場合は、他の方法がある...

どのようにそれを稼働させる###

のいずれかが良い古いajax、それを使用してdivでウェブサイト全体を読み込むことができますし、より多くのことを行うことができますワームホール! ajaxを使ってWebページをスケルトンに分解すると、あなたはXとYを得ることができるだけでなく、あなたもpage =)をパーソナライズすることができます。

あなたはそれに夢中になり、希望の検索エンジンからの結果とリンクのみを取得します(これはプロジェクトなので)OR divやその他の要素にページ全体を読み込むだけです。

私がいないようにあなたとXMLは仲良くしていない場合は、jQueryの

+0

上記のコードに変更を加えてもよろしいですか?私はあなたが言っていることを理解していますが、私の試みは成功していません。私は本当にこれが不可能だと思うようになっていますが、上記の小さな例の解決策があれば、この投稿に編集を投稿してください。あなたが実際の例を提供する場合、私はあなたに恩恵を与える –

+0

チェックアウトhttps://W3Schools.com、それはGoogleにデータを送信し、結果を受信し、それらを分類する検索フィールドです! Ajaxは外部ソースと連携するために内部ソース用に設計されているため、表示するウェブサイトほとんどの検索エンジンが送受信するデータを送受信できる機能を有効にする必要があります... – legend

+0

この方法から外れるので、Ajaxをウェブサイトで使用する方法を見つけることができます。そこに到達するには、それを動作させるための多くのトリックが必要です。だから私は、私たちのためにカーソル軸を取得するあなたの最終的な意図をフレームすることをお勧めします – legend

関連する問題