iframe_jqueryを操作するjqueryメソッド

まず、JQUERY のオブジェクト content() のヘルプ ファイルを見てみましょう

コンテンツ()
概要
一致する要素内のすべての子ノード (テキスト ノードを含む) を検索します。要素が iframe の場合、ドキュメントのコンテンツ

を見つけます。

例
説明:
すべてのテキスト ノードを検索し、太字で表示します

HTML

コードをコピー コードは次のとおりです:

こんにちはJohnhttp://ejohn.org/">ジョン>、元気ですか
やってる？

jQuery

コードをコピー コードは次のとおりです:

$("p").contents().not("[nodeType=1]").wrap("");結果:

こんにちは
Johnhttp://ejohn.org/">ジョン>、お元気ですか
やってる?

説明:
空のフレームにコンテンツを追加

HTML

コードをコピー コードは次のとおりです:

jQuery

コードをコピー コードは次のとおりです:

$("iframe").contents().find("body")
.append("iframe 内にあります!");

iframe の境界線を削除しますframeborder="0"

1 コンテンツには 2 つの ifame があります

コードをコピーします コードは次のとおりです:

leftiframe の jQuery は mainiframe の src コードを変更します:

コードをコピー コードは次のとおりです:

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")

2 コンテンツ内に mainiframe の ID を持つ iframe が存在する場合

コードをコピーします コードは次のとおりです:

サブウィンドウ A と B には、DOM 操作のデモンストレーションを容易にするために、Hello という ID を持つ P を配置しました。サブウィンドウ A と B の主な HTML コードは次のとおりです。

コードをコピーします コードは次のとおりです:

Hello World!

1. iframe では、親ウィンドウが子ウィンドウの DOM を操作します

親ウィンドウと子ウィンドウが構築されたので、親ウィンドウで次の iframeA() 関数を使用して、子ウィンドウ A の背景色を赤に変更できます。

コードをコピーします コードは次のとおりです:

functioniframeA(){//ID hello
のサブウィンドウ A の背景色を変更します。 vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//IE、Firefox 対応の iframeDOM 取得関数
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2. iframe では、子ウィンドウは親ウィンドウの DOM を操作します

子ウィンドウでは、DOM 操作の前に Yige 親オブジェクトのメソッドを追加するだけで、簡単に親ウィンドウを操作できます。たとえば、上記の子ウィンドウ B では、次のメソッドを使用できます。コードは、親ウィンドウのコンテンツを ID「pHello」に置き換えます:

-----------------

3. iframe 内で、サブウィンドウ A がサブウィンドウ B の DOM を操作します

子ウィンドウは親ウィンドウのウィンドウオブジェクトとドキュメントオブジェクトを操作できるため、子ウィンドウは別の子ウィンドウのDOMも操作できます~ Broken Bridge Canxueは子ウィンドウBの親を直接使用して、子ウィンドウBのgetIFrameDOMを直接呼び出すことができます。この関数はサブウィンドウ A のドキュメント オブジェクトを取得するため、次のコードのようにサブウィンドウ A のコンテンツを変更するのは非常に簡単です。

コードをコピーします コードは次のとおりです:

vara=parent.getIFrameDOM("wIframeA");

=========================================== === ====================================

iframe の高さの自動変更に関する問題がずっと気になっていて、インターネットで情報を探しましたが、jquery (バージョン 1.3.2) と組み合わせました。 4 行のコードは、IE、Firefox、Opera、Safari、Google と完全に互換性があります

Chrome、js は次のとおりです:

コードをコピーします コードは次のとおりです:

関数 heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}その他{
bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//この行は前の行を置き換えることができるため、heightSet 関数のパラメータを省略できます
//bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
document.getElementById("thisFrameId").height=bodyHeight; }

引用

このキーワードはさまざまなブラウザーで異なる意味を持つようです。FF と IE は内部ページの高さを取得するために iframe の名前を使用する必要がありますが、他のブラウザーはこれまたは ID を使用できます。

引用

彼らはすべて、ajax を頻繁に使用するが、毎回設定したくない場合、iframe を動的に変更することは、コードのクリーンさの要件を確実に満たすことはできません。または、 iframe を離れることもできます。結局のところ、ajax または動的フォームは、非同期リクエストの後に最後に追加するだけで済みます。

JSコード

コードをコピー コードは次のとおりです: 親.window.heightSet();