html - 从 Iframe 中获取 Iframe 的属性

Question

使用 iframe 时，如何在 iframe 中获取 iframe 的属性值？

这是我的代码:

<iframe src="slideriframe.html" name="iframe_a" customAttr="example" style="border:none"></iframe>

这是我目前拥有的:

alert(window.frameElement.getAttribute('customAttr'));

这里是错误:

Uncaught SecurityError: Failed to read the 'frame' property from 'Window': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

谢谢

Answer 1

您需要使用 postMessage API 提供了一种在 iFrame 与其父级之间进行通信的简单方法。您可以向父级发送一条消息，然后父级查找该值并将另一条消息发回 iFrame。

要向父页面发送消息，您可以按如下方式调用它。

parent.postMessage('Hello parent','http://origin-domain.com');

在另一个方向上，我们可以使用以下代码将消息发送到 iFrame。

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');

要接收消息，请为消息事件创建一个事件监听器。

function receiveMessage(event)
{
  if (event.origin !== "http://remote-domain.com:8080")
    return;

  console.log(event.data);
}

if ('addEventListener' in window){
    window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
    window.attachEvent('onmessage', receiveMessage);

这些示例使用 origin 属性来限制消息发送到的位置并检查消息的来源。可以指定 * 以允许发送到任何域，并且在某些情况下您可能希望接受来自任何域的消息。但是，如果您这样做，您需要考虑安全隐患并对传入消息实现您自己的检查以确保它包含您所期望的内容。在这种情况下，iframe 可以将其高度发布到“*”，因为我们可能有多个父域。但是，检查传入消息是否来自 iFrame 是个好主意。

function isMessageFromIFrame(event,iframe){
    var
        origin  = event.origin,
        src     = iframe.src;

    if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
        throw new Error(
            'Unexpect message received from: ' + origin +
            ' for ' + iframe.id + '. Message was: ' + event.data  
        );
    }

    return true;
}