html中iframe怎么传值

在HTML中，iframe（内嵌框架）元素用于在当前HTML文档中嵌入另一个HTML页面，我们可能需要在父页面与iframe页面之间传递数据，如何实现iframe传值呢？本文将详细介绍几种在HTML中实现iframe传值的方法。

使用URL参数传递

使用URL参数传递是最简单的一种方式，在父页面中,我们可以将需要传递的数据作为参数附加到iframe的src属性中。

父页面代码：

Markup

<iframe id="myIframe" src="iframe.html?param1=value1&param2=value2"></iframe>

在iframe页面中,我们可以通过JavaScript获取URL中的参数：

JavaScript

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}
var param1 = getQueryVariable("param1");
var param2 = getQueryVariable("param2");

这样,我们就成功从父页面传递了参数到iframe页面。

使用JavaScript直接访问iframe元素

在父页面中，我们可以通过JavaScript直接访问iframe内部的DOM元素,从而实现传值。

父页面代码：

Markup

<iframe id="myIframe" src="iframe.html"></iframe>
<script>
    var iframe = document.getElementById('myIframe');
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    // 设置iframe页面中的元素值
    iframeDocument.getElementById('myElement').innerHTML = 'Hello, iframe!';
</script>

iframe页面代码：

Markup

<p id="myElement"></p>

需要注意的是,这种方式仅当iframe与父页面属于同一个域时才有效。

html中iframe怎么传值

使用window.postMessage跨域传递

当iframe与父页面不在同一个域时，我们可以使用HTML5的window.postMessage方法实现跨域通信。

父页面代码：

Markup

<iframe id="myIframe" src="http://example.com/iframe.html"></iframe>
<script>
    var iframe = document.getElementById('myIframe');
    // 发送消息
    iframe.onload = function() {
        var message = { key: 'value' };
        iframe.contentWindow.postMessage(message, 'http://example.com');
    };
    // 接收来自iframe的消息
    window.addEventListener('message', function(event) {
        if (event.origin !== 'http://example.com') {
            return;

Markup

        }
        console.log('Received message:', event.data);
    }, false);
</script>

iframe页面代码：

Markup

<script>
    // 接收来自父页面的消息
    window.addEventListener('message', function(event) {
        if (event.origin !== 'http://parent-domain.com') {
            return;
        }
        console.log('Received message:', event.data);
        // 发送消息给父页面
        event.source.postMessage('Message received!', event.origin);
    }, false);
</script>