Question

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

这是我的代码：

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

以下是我目前的情况：

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

这是错误：

Uncaught SecurityError：无法从中读取'frame'属性 'Window'：在访问帧时阻止原点为“null”的帧原点为“null”。协议，域和端口必须匹配。

由于

Answer 1

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

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

var http = require('http'),
    fs = require('fs'),
    util = require('util'),
    url = require('url');

var server = http.createServer(function(req, res) {
    if(url.parse(req.url).pathname == '/') {
        res.writeHead(200, {'content-type': 'text/html'});
        var rs = fs.createReadStream('index.html');
        util.pump(rs, res);
    } else {
        res.writeHead(404, {'content-type': 'text/html'});
        var rs = fs.createReadStream('404.html');
        util.pump(rs, res);
    }
});

server.listen(8080);

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

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

要接收消息，请为消息事件创建事件listerner。

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

这些示例使用origin属性来限制发送消息的位置并检查消息的来源。可以指定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);以允许发送到任何域，在某些情况下，您可能希望接受来自任何域的邮件。但是，如果您这样做，您需要考虑安全隐患，并对传入的消息实施您自己的检查，以确保它包含您的期望。在这种情况下，iframe可以将其高度发布到＆＃39; *＆＃39;，因为我们可能有多个父域。但是，检查传入的消息来自iFrame是个好主意。

从Iframe中获取Iframe的属性

1 个答案: