如何訪問內部框架Html？

我想從另一個框架調用一個函數，但我似乎無法通過dom旅行嗎？難道我做錯了什麼？如何訪問內部框架Html？

indes.html代碼：

<frameset rows="25%, 75%"> 
    <frame src="top.html"></frame> 
    <frameset cols="50%, 50%"> 
     <frame src="frame_left.html" name="left_frame"> 
     <frame src="frame_right.html" name="right_frame"> 
    </frameset> 
</frameset>

中的top.html我：

<body> 
    <h1>Top Frame</h1> 
<button onclick="clicked()">Click me !</button> 
<script type="text/javascript"> 
    function clicked() { 
     console.log("you clicked"); 
     console.log(top.frames["left_frame"].left()); 
    } 
</script> 
</body>

frame_left.html我：

<body> 
    <h3>Frame left</h3> 
    <script type="text/javascript"> 
     function left() { 
      console.log("You called the left function from left frame"); 
     } 
    </script> 
</body>

我得到這個錯誤：

top.html：12未捕獲SecurityError：Bl將原始「null」的框架鎖定到訪問源爲「null」的框架。協議，域和端口必須匹配。

來源

2016-04-26 Beto

你如何在瀏覽器中調用這些測試頁面 - 通過HTTP，還是通過文件協議？錯誤消息表明它可能是後者。我建議你爲開發和測試設置一個本地Web服務器（類似於WAMP/MAMP，適合初學者）。 – CBroe

不，它只是簡單的html。使用chrome打開文件。是不是可以通過DOM操作來訪問它？ @CBroe – Beto

如果您只是將它們作爲本地文件打開，許多瀏覽器在涉及JavaScript可以執行的操作時將應用更嚴格的規則。我非常確定，一旦你通過HTTP調用這些頁面，問題就會消失。 – CBroe

您可以使用postMessage，如果你是所有幀

窗口的所有者1 - 接收

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    var origin = event.origin || event.originalEvent.origin; 
    // For Chrome, the origin property is in the event.originalEvent object. 
    if (origin !== "http://example.org:8080") 
    return; 

    // ... 
}

窗口 - 2發

var popup = window.open(...popup details...); 
popup.postMessage(
     "The user is 'bob' and the password is 'secret'", 
     "https://secure.example.net" 
);

編輯2 剛試過與此代碼片段爲我工作：

父框架：

(function() { 
    // ******** Attn : Please specify the domain2 where the iframe is located; *********** 
    var originToConnect = 'http://<childDomain>/'; 


    //a dummy message from child iframe will trigger this receiveChildMessage function 
    //This inturn will act as a callback to send its location again using postMessage 
    var receiveChildMessage = function(e){ 
     console.log('Parent: Request received from child'); 
     document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Request received from child<hr/>'; 

     var iframe = window.frames['iframe1']; 
     iframe.postMessage(window.top.location.href,originToConnect);//acts like callback and send loc to child 

     console.log('Parent: Sending Location info to child'); 
     document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Sending Location info to child<hr/>'; 
    }; 
    if (typeof window.addEventListener !== 'undefined') { 
     window.addEventListener('message', receiveChildMessage, false); 
    } else { 
     window.attachEvent('onmessage', receiveChildMessage); 
    } 
})();

內框：

(function() { 
    // ******** Attn : Please specify the domain1 where the main file(parent domain I used "server1") is located;*********** 
    var originToConnect = 'http://<parentDomain>/'; 

    console.log('Child: Sending request to parent'); 
    document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Sending request to parent<hr/>'; 

    //Posting a dummy message to trigger onmessage on the parent window 
    //the parent in turn will post a different message where it is programmed to send its location 
    //then will be received in this iframe receiveParentMessage() method 
    parent.window.postMessage('Give Me your co-ordinates',originToConnect); 


    var receiveParentMessage = function(e){ 
     console.log('Child: Message received from parent'); 
     document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Message received from parent<hr/>'; 
     console.log('Child: Print Window location = '+e.data); 
     document.getElementById('msg').innerHTML = '<span>Child:</span><br/> Printing Parent Window location:<br/><br/><b>'+e.data+'</b><hr/>'; 
    }; 
    if (typeof window.addEventListener !== 'undefined') { 
     window.addEventListener('message', receiveParentMessage, false); 
    } else { 
     window.attachEvent('onmessage', receiveParentMessage); 
    } 
})();

你必須創建另一對相互通信。

來源

2016-04-26 21:16:15 joyBlanks

嘿感謝回答。這看起來似乎比它要複雜得多。我已經找到了這個，但它似乎並沒有工作，無論是嘗試http://www.easywayserver.com/blog/calling-parent-child-function-in-frame/ @joyBlanks – Beto

@Beto檢查更新後的工作我 – joyBlanks

如何訪問內部框架Html？

回答

相關問題