操作百科事典遠位のiframe

//親ページのサブページの操作

<!DOCTYPE HTML>
<HTML LANG = "EN">

<ヘッド>
    <メタ文字セット= "UTF-8">
    <メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
    <META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
    <タイトル>インデックス</ TITLE>
    <スクリプトSRC = "./ jqueryの-1.12.4.js"> </ SCRIPT>
</ head>の

<身体>
    <divのスタイル= "幅:600PX;高さ:400ピクセル;#000;">
        <IFRAME名= 'AA' ID = 'AA' SRC = "./ Iframe.htmlの" FRAMEBORDER = "0" スクロール= "NO" allowfullscreen = '真' 幅= '100%' の高さ= '50% '> < / iframe>の
        <IFRAME NAME = 'CC' のid = 'CC' SRC = "./ iframe2.html" FRAMEBORDER = "0" スクロール= "NO" allowfullscreen = '真' 幅= '100%' の高さ= '50% '> < / iframe>の

    </ div>


    <スクリプト>
        機能指数(){
            console.log(「Iは、インデックスメソッドの親ページです」)
        } 

        //親ページのサブページ操作には、以下の方法で行われ、サーバーではなく、純粋な静的なページが必要です

            //ウィンドウオブジェクトの親ページのサブページは、iframeのDOM DOMが.contentWindow [0]オブジェクトJQ JQ JQオブジェクトオブジェクトとオブジェクトを回すことができないオブジェクトを使用する必要があります
            VARはiframe = $( "#のAA")[0] .contentWindow。 
            //または 
            。VAR iframe1 = $(window.parent.document).contentsは、()( "#のAA")[0] .contentWindowを見つけます。

            // DOM要素の親ページ操作のサブページ
            //オブジェクト.contents JQ()メソッドは、DOMオブジェクトがテキストノードが含まれているこのJQ下のすべての子ノードを取得します。要素がIFRAMEであれば、文書のコンテンツ取得を見つけるためには、JQの対象docuemntです
            $( "#のAA")の内容()( '#のB-B')を見つけるのcss({ "幅":。。。。$( '#のA-A')の幅()、 "高さ":$( '#のA-A') 。高さ() })
            //または
            $( "#1 AA")[0] .contentWindow。$( "#1 BB")。CSS( "背景色"、 "赤")

            値で子ページへ//親ページ
            $( "#1 AA")[0] .contentWindow.userName = "WWP"。

            window.userName = "WWP2"

            メソッド定義されたサブページを使用して//親ページ
            $( "#のAA")[0] .contentWindow.iframe();
    </ SCRIPT>
</ BODY>

</ HTML>
 
//サブページ操作の親ページ
<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
    <メタ文字セット= "UTF-8">
    <メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
    <META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
    <タイトル> ifrae </ TITLE>
    <スクリプトSRC = "./ jqueryの-1.12.4.js"> </ SCRIPT>
    <スタイル>
        HTML、本体{
            パディング:0;
            マージン:0;
            幅:100%;
            高さ:100%;
        }
    </スタイル>
</ head>の
<身体>
    <DIV ID = "BB" スタイル= 'アクア; 幅:100%; 高さ:100%; "> </ div>

    <スクリプト>
        関数はiframe(){
            console.log(「私は、ページのiframe方法の子です」)
        }

        //ウィンドウオブジェクトのメソッドサブページの親ページを取得します
        VAR parentWindow = window.parent || window.top
        $( '#のB-B')、CSS({ '幅':$( '#A-A' に、window.parent.document).width()、 '高':$( '#A-A' に、window.parent.document) 。高さ()})
        console.log(window.userName)
        // $( '#A-A' に、window.parent.document)

        //ページのためのサブDOMオブジェクトの親ページ
        変数$ AA = $(window.parent.document).contents()。( "#のAA")を見つけます

        親ページのバイオグラフィー値データを使用して//サブページ
        VARのuserName = window.userName。
        console.log(ユーザ名)。
        //データは、ページの親ウィンドウ内に存在します
        VAR USERNAME2 = window.parent.userName。
        console.log(USERNAME2)

        親ページで定義されたメソッドを使用して//サブページ
        window.parent.index();

        親ページで//ネストされたサブページの操作と同じレベルのサブページのDOM要素
        プラスオーダーコードの負荷と速度でなければならず、法の兄弟ページを呼び出す//ウィンドウオブジェクトを取得するための時間を与えられずにタイマーは、ネストされたページは、時間のかかる作業であります
        VAR iframe2 = $(window.parent.document).contents()を見つける( "#のCC")contentWindow。。。
        setTimeout(関数(){
            iframe2.iframeFun();
        }、50)


        //備考  
        // window.parentは、window.top(TOPはここで取得した多層ネストされたインラインフレームを使用した場合には、最上位層です)
        //トップ。$( "インラインフレーム[名= 'iframeWindow']")[0] .contentWindow。$( "#のInside_tableElement")、iframe要素に到達するためには、
    </ SCRIPT>
</ BODY>
</ HTML>

おすすめ

転載: www.cnblogs.com/it-wwp/p/12217915.html