jqueryを使ってiframeを操作する手順を詳しく解説

今回はjqueryを使ってiframeを操作する手順を詳しく解説します。 jqueryを使ってiframeを操作する際の注意点を実際に見てみましょう。

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

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

例

<p>Hello <a href="http://ejohn.org/">John</a>, how are 
you doing?</p>

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:
<p><b>Hello</b> 
<a href="http://ejohn.org/">John</a>, <b>how are you 
doing?</b></p>

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

HTML

<iframe 
src="/index-blank.html" width="300" height="100"></iframe>

jQuery

$("iframe").contents().find("body")
.append("I'm in an iframe!");

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

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

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe>

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

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

2 コンテンツに mainiframe の ID を持つ ifame がある場合

<iframe id="mainifame"...></ifame>

ifame には、 someID

<p id="someID">you want to get this content</p>

someID

$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值

2のコンテンツを取得します 上に示すように、leftiframeのjQueryはmainiframeのコンテンツを操作します someID

$("#mainframe",parent.document.body).contents().find("someID").html()或者 
$("#mainframe",parent.document.body).contents().find("someID").val()

Jqueryは、iframeが属する親ウィンドウでID xuanのタグを取得します

$(window.parent.document).find("#xuan").html(x);//

// jsで要素を作成し、親要素のIframe内の要素内のDOM操作問題に追加します:

iframe内の親ウィンドウのメソッドを直接呼び出します: 親ウィンドウにaddメソッドがあると仮定します

self.parent .add();

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

IE と Firefox の iframe ドキュメント オブジェクトの違い

IE6 と IE7 では、document.frames[ID].document を使用して、 iframeサブウィンドウでドキュメントオブジェクトにアクセスしますが、これはW3C規格に準拠していないIE独自の記述メソッドであり、Firefoxではdocument.getElementById(ID).contentDocumentメソッドを使用します。今日はサンプルを作成しています。IE8 は、W3C 標準に準拠する

document.getElementById(ID).contentDocument メソッドも使用します。したがって、IE と Firefox で iframe
document オブジェクトを取得できる関数を作成できます - getIFrameDOM:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

追記: ドキュメント オブジェクトの代わりに iframe の

window オブジェクト を取得したい場合は、document.getElementById( ID ).contentWindow メソッド。このようにして、子ウィンドウ内の関数など、子ウィンドウ内で window オブジェクトを使用することができます。

子ウィンドウで親ウィンドウの関数を使用して、親ウィンドウのドキュメントオブジェクトを取得します

親に関数があれば、子ウィンドウで親ウィンドウのウィンドウオブジェクトを取得できます。 getIFrameDOM というウィンドウがある場合は、parent.getIFrameDOM を通じて呼び出すことができます。同様に、parent.document を使用して、子ウィンドウ内の親ウィンドウのドキュメント オブジェクトにアクセスできます。

JavaScript の使用 iframe DOM 操作の例

まず、ID が wIframeA と wIframeB、アドレスが a.html、b.html である 2 つの iframe 子ウィンドウを親ウィンドウに導入します。

親ウィンドウのメイン HTML コードは次のとおりです。

<p id="pHello" style="margin:10px 
auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</p> 
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 
frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" 
src="b.html" scrolling="no" frameborder="0"></iframe>

サブウィンドウ A と B には、DOM 操作のデモンストレーションを容易にするために、ID に hello を付けた P を入れています。

<p id="hello">Hello World!</p>

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

親ウィンドウと子ウィンドウが作成されるので、次の iframeA() 関数を親ウィンドウで子ウィンドウAの背景色を赤色に変更します。 ：

functioniframeA(){//给子窗口A改变ID为hello的背景色
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を簡単に操作できます。 DOM 操作の前に親オブジェクトのメソッドを追加するだけです。たとえば、上記のサブウィンドウ B では、次のコードを使用して親ウィンドウのコンテンツを ID「pHello」に置き換えます。

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

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

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

vara=parent.getIFrameDOM("wIframeA");

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

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//这行可代替上一行，这样heightSet
函数的参数
可以省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
       document.getElementById("thisFrameId").height=bodyHeight;  
}
<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码

parent.window.heightSet();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery遍历筛选数组与json对象的方法合集

jquery从数组移除选中值步骤详解

以上がjqueryを使ってiframeを操作する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。