如何访问内部框架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？

回答

相关问题