jquery iframe操作 7951 ワード jquery jquery iframe操作 jquery操作iframeの使用iframeの境界frameborder="0"を削除1の内容にifameが2つあります http://www.baidu.com ") 2中身にmainiframeというIDのifameifameはsomeIDyou want to get this contentを含んで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操作の問題:詳細は、リンクを参照してください:http://www.cssrain.cn/?p=1376iframeで親ウィンドウを直接呼び出す方法:親ウィンドウにaddがあると仮定する方法self.parent.add(); =============================================================== IEとFirefoxのiframe documentオブジェクトに対する差異IE 6、IE 7ではdocumentを使用することができる.frames[ID].documentはiframeサブウィンドウのdocumentオブジェクトにアクセスするが、これはW 3 C規格に合わない書き方であり、IEの下で独自の方法でもあり、Firefoxの下では使用できない、Firefoxの下ではW 3 C規格に合致するdocumentを使用する.getElementById(ID).contentDocumentメソッド、今日私は実例を書く時、IE 8を通じてテストを行って、IE 8もW 3 Cの標準に合致するdocumentを使用します.getElementById(ID).contentDocumentメソッド.IEとFirefoxの下でiframe documentオブジェクトを取得するために一般的な関数を書くことができます.getIframeDOM:function getIFrameDOM( id) { return document.getElementById ( id) .contentDocument || document.frames [ id] .document ; } P.S.:documentオブジェクトではなくiframeのwindowオブジェクトを取得する場合はdocumentを使用します.getElementById(ID).contentWindowの方法.これにより、サブウィンドウのwindowオブジェクト、例えばサブウィンドウの関数を使用することができます.サブウィンドウで親ウィンドウの関数を使用して、親ウィンドウdocumentオブジェクトを取得します.サブウィンドウではparentで親ウィンドウのwindowオブジェクトを取得できます.親ウィンドウにgetIframeDOMという関数があればparentを使用できます.getIframeDOMを呼び出し、parentを使用します.documentは、サブウィンドウで親ウィンドウのdocumentオブジェクトにアクセスできます.JavaScriptによるiframeのDOM操作の例まず,親ウィンドウに2つのiframeサブウィンドウを導入し,IDはそれぞれwIframeA,wIframeB,アドレスはそれぞれa.html,b.htmlである.親ウィンドウの主なHTMLコードは次のとおりです. <div id="pHello" style="margin:10px auto;width:360px;height:30px;">此处可通过iframeB的 JavaScript函数,来替换哦~</div> <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にhelloというIDのPを置いて、DOM操作のプレゼンテーションを便利にしました.サブウィンドウA、Bの主なHTMLコードは以下の通りです.<p id="hello">Hello World!</p> 1.iframeで親ウィンドウが子ウィンドウのDOMを操作する親ウィンドウと子ウィンドウが作成され、親ウィンドウで次のiframeA()関数を使用して、子ウィンドウAをPの背景色を赤に変更できます.function iframeA( ) { //给子窗口A改变ID为hello的背景色 var a = getIFrameDOM( "wIframeA" ) ; a.getElementById ( 'hello' ) .style .background = "red" ; } function getIFrameDOM( id) { //兼容IE、Firefox的iframe DOM获取函数 return document.getElementById ( id) .contentDocument || document.frames [ id] .document ; } 2、iframeで、子ウィンドウは親ウィンドウのDOMを操作するサブウィンドウでは、親ウィンドウDOM操作を容易に行うことができ、DOM操作の前に亦歌parentオブジェクトを追加する方法だけでよい.例えば、上のサブウィンドウBでは、親ウィンドウのIDが「pHello」の内容を以下のコードで置き換えることができる.------------------- 3、iframeでは、サブウィンドウAがサブウィンドウBのDOMを操作するサブウィンドウが親ウィンドウのwindowオブジェクトとdocumentオブジェクトを操作できる以上、サブウィンドウは別のサブウィンドウのDOMを操作することもできます~ブリッジ残雪はサブウィンドウBでparentを使用して親ウィンドウのgetIframeDOM関数を直接呼び出してサブウィンドウAのdocumentオブジェクトを得ることができ、サブウィンドウAの内容を変更するのは簡単です.var a= 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=this Frame.contentWindow.document.documentElement.scrollHeight;//この行は前の行に代わることができ、heightSet関数のパラメータは//bodyHeight=document.getElementById("this FrameId").contentWindow.document.documentElement.scrollHeightを省略することができる. } document.getElementById("thisFrameId").height=bodyHeight; } 参照このキーワードは様々なブラウザで意味が異なるようですが、FFとIEはiframeの名前で内部ページの高さを得る必要がありますが、他のブラウザはthisやIDを使うことができます.参照すべて1つの非同期の問題を言って、もしあなたがajaxが特に多く使うならば、しかし毎回すべて設定したくなくて、それでは動的にiframeを変えてきっとあなたのコードの清掃の要求に達しないで、仕方がなくて、あるいはあなたはiframeを離れます.一般的な処理方法しか言えませんが、ajaxまたはダイナミックフォームは一般的なアプリケーションでは小数の割合しか占めていません.非同期リクエストの後に追加するだけです.Jsコードparent.window.heightSet(); AWS CodeBuild で Rails アプリケーションの docker build ユーザーにカスタムHTMLデータ情報を送信させてみる