web-dev-qa-db-ja.com

別のフレームのコンテキストでJQueryを実行する

私が作業しているクライアントには、次のようなフレームセットがあります...

<frameset rows="100,*, 0">
  <frame name="theFrame" id="theFrame" src="blah.html" >
  <frame name="theSecondFrame" id="theSecondFrame" src="foo.html" >
  <frame name="importantFrame" id="importantFrame" src="myFrame.html" >
</frameset>

特定のアクションが発生すると、ほとんどのページを引き継ぎ、他のフレームとの相互作用をブロックするために、フレーム（現在非表示になっている重要なフレーム）が必要です。 jquery block UIプラグインを使用して対話をブロックすることを計画しています。

問題は、foo.htmlまたはblah.htmlファイルを実際に変更できないことです。そのため、JSコードはそこに存在できません。 これらのフレームのコンテキストでjqueryコードを実行する必要があります。要約すると、myFrame.htmlにJQueryコードが存在するが、他のフレームのコンテキストで実行する必要があります。どうやってやるの？それが理にかなっていることを願っています。

ありがとうCDR

jqueryhtmlframes
39
ChrisDiRulli

$でより一般的に呼び出すjQuery関数は、contextという2番目の引数を取ります。これは、「jQueryオブジェクトのどのDOM要素で検索を行うべきか」です。ほとんどの場合、この引数を省略するため、コンテキストはデフォルトで現在のHTMLドキュメントになります。コードがiframeで実行されている場合、ドキュメントはデフォルトでそのiframeのドキュメントになります。ただし、他のフレームのいずれかのドキュメントを簡単に取得できます。

たとえば、これをmyFrame.htmlに配置すると、blah.htmlを含むフレームからすべてのh1要素が削除されます。 $の2番目の引数に注目してください。これは、重要なフレーム内からブラーフレームを取得する式です。

<html>
  <head>
    <script type="text/javascript" src="/javascripts/jquery.js"></script>
    <script type="text/javascript">
      function doIt() {
        $('h1', window.parent.frames[0].document).remove()
      }
    </script>
  </head>
  <body>
    <h1>My Frame</h1>
    <a href="#" onclick="doIt()">Do It</a>
  </body>
</html>
81
pjb3

Pjb3が言ったように、jQueryコンテキストを設定します。ネストされたフレームがある場合、コードは次のようになります。

$('*',window.parent.frames[0].frames[0].document).size();

または、さらに良いことに、ショートカットを作成します。

targetFrame = window.parent.frames[0].frames[0].document;
$('*',targetFrame).size();
4
Patrick Fisher

ブロックプラグインについては確信がありませんが、関連するフレームを取得し、次のような「フレームツリー」を使用して操作することはできません。（importantFrame.htm内から）

parent.theFrame.someProperty = someValue;

例えば：

parent.theFrame.location.href='anotherPage.html';

私が読んでいたものから、ターゲットページでJqueryが必要になるかもしれませんが、次のようなものを試すことができます：

parent.theFrame.block();

または多分：

$('#theFrame').block();
0
Andrew M