none
JavaScript可以設定某分頁中的某物件嗎 RRS feed

  • 問題

  • 我在某網頁H中有一個物件, 在這網頁中另由一個iframe中載入另一個網頁A,這個網頁會再開啟其他分頁並載入其他網頁B,而原iframe會被關閉,A網頁也就結束了,  我的需求是希望B網頁中的JS程式可以更改到H網頁中某物件的innerHTML, 我知道parent.document.getElementBy("id")這個方法可存取上一網頁的物件, 但此例不可行, 有高手有方法嗎? 感謝回應者.

                      

    2019年9月14日 上午 02:21

解答

  • 您好
    由於沒有看到您的程式碼
    所以不知道您所謂的『不可行』是否真的不可行

    小喵做了一個小小的測試,有網頁H,A,B
    H中有iframe載入A
    A中有button開啟B
    H中有按鈕可以把H中的iframe清除
    B中有按鈕,可以把B中的txtB1的內容放到H中的txtH1裡面
    (大概的模仿您的需求)

    相關程式碼如下:

    H:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是H
        <hr />
        <input type="button" id="btnRemoveIfrm" value="移除iframe" />
        <hr />
        <input type="text" id="txtH1" value="" />
        <div id="div1">
            <iframe src="A.html" frameborder="0"></iframe>
        </div>
        
        <script>
            $(function () {
                $('#btnRemoveIfrm').click(function () {
                    $('#div1').html('<span>清除iframe</span>');
                });
            });
        </script>
    </body>
    </html>

    A:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是A
        <hr />
        <input type="button" id="btnOpen" value="開啟新視窗" />
        <script>
            $(function () {
                $('#btnOpen').click(function () {
                    var B = window.open('B.html');
                });
            });
        </script>
    </body>
    </html>

    B:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是B
        <hr />
        <input type="text" id="txtB1" value="" />
        <input type="button" id="btnChgH1" value="修改H1的Txt" />
    
        <script>
            $(function () {
                var A = window.opener;
                var H = window.opener.parent;
                var txtH1 = $('#txtH1',H.document);
                $('#btnChgH1').click(function () {
                    console.log(A);
                    console.log(H);
                    console.log(txtH1);
                    console.log(txtH1.val());
                    var txtB1 = $('#txtB1');
                    console.log(txtB1.val());
                    txtH1.val(txtB1.val());
                });
            });
        </script>
    </body>
    </html>

    重點在B的一開始載入時,就用頁面全域的變數先將相關的頁面(A,H)都先設定取得

    那麼即使H中,將包含A的iframe直接換掉清除
    B中依舊認得H
    那麼就可以依舊把B中的內容放到H中

    您參考看看

    ^_^

    PS.小喵我測試的瀏覽器就是chrome唷,有用到『parent』而且依舊有效。

    ^.^a


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...




    2019年9月16日 上午 03:26
    版主

所有回覆

  • Chrome 已取消 parent 支援。

    跨 frame 要看瀏覽器,IE11 還支援 parent 。


    不精確的問法,就會得到隨便猜的答案;自己都不肯花時間好好描述問題,又何必期望網友會認真回答?

    2019年9月14日 上午 03:35
  • 您好
    由於沒有看到您的程式碼
    所以不知道您所謂的『不可行』是否真的不可行

    小喵做了一個小小的測試,有網頁H,A,B
    H中有iframe載入A
    A中有button開啟B
    H中有按鈕可以把H中的iframe清除
    B中有按鈕,可以把B中的txtB1的內容放到H中的txtH1裡面
    (大概的模仿您的需求)

    相關程式碼如下:

    H:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是H
        <hr />
        <input type="button" id="btnRemoveIfrm" value="移除iframe" />
        <hr />
        <input type="text" id="txtH1" value="" />
        <div id="div1">
            <iframe src="A.html" frameborder="0"></iframe>
        </div>
        
        <script>
            $(function () {
                $('#btnRemoveIfrm').click(function () {
                    $('#div1').html('<span>清除iframe</span>');
                });
            });
        </script>
    </body>
    </html>

    A:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是A
        <hr />
        <input type="button" id="btnOpen" value="開啟新視窗" />
        <script>
            $(function () {
                $('#btnOpen').click(function () {
                    var B = window.open('B.html');
                });
            });
        </script>
    </body>
    </html>

    B:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-1.12.1.js"></script>
    </head>
    <body>
        我是B
        <hr />
        <input type="text" id="txtB1" value="" />
        <input type="button" id="btnChgH1" value="修改H1的Txt" />
    
        <script>
            $(function () {
                var A = window.opener;
                var H = window.opener.parent;
                var txtH1 = $('#txtH1',H.document);
                $('#btnChgH1').click(function () {
                    console.log(A);
                    console.log(H);
                    console.log(txtH1);
                    console.log(txtH1.val());
                    var txtB1 = $('#txtB1');
                    console.log(txtB1.val());
                    txtH1.val(txtB1.val());
                });
            });
        </script>
    </body>
    </html>

    重點在B的一開始載入時,就用頁面全域的變數先將相關的頁面(A,H)都先設定取得

    那麼即使H中,將包含A的iframe直接換掉清除
    B中依舊認得H
    那麼就可以依舊把B中的內容放到H中

    您參考看看

    ^_^

    PS.小喵我測試的瀏覽器就是chrome唷,有用到『parent』而且依舊有效。

    ^.^a


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...




    2019年9月16日 上午 03:26
    版主
  • 非常感謝小喵的回覆, 這個語法可行, 試用 chrome firefox opera都可以 edge (IE)不行. 

    <script>

    window.opener.parent.document.getElementById('name').innerHTML = "handsome";

    </script>"

    2019年9月24日 上午 12:04