layui传给iframe值(iframe传数据)

在Web开发中，经常需要在父页面与iframe之间传递数据。使用layui框架时，可以通过多种方式实现这一功能。本文将介绍如何通过layui框架将数据从父页面传递到iframe，并提供几种不同的实现思路。

1. 使用JavaScript直接赋值

最简单的方法是直接使用JavaScript将数据赋值给iframe的window对象。这种方法适用于简单的数据传递。

示例代码

html
<!-- 父页面 -->
</p>



    
    <title>父页面</title>
    


    <div id="iframeContainer">
        
    </div>

    
    
        document.getElementById('myIframe').onload = function() {
            var iframeWindow = document.getElementById('myIframe').contentWindow;
            iframeWindow.postMessage({ key: 'value' }, '*');
        };
    



<p>

html
<!-- iframe页面 -->
</p>



    
    <title>iframe页面</title>


    <div id="dataDisplay"></div>

    
        window.addEventListener('message', function(event) {
            var data = event.data;
            document.getElementById('dataDisplay').innerText = JSON.stringify(data);
        });
    



<p>

2. 使用layui的layer模块

layui的layer模块提供了丰富的弹出层功能，也可以用来传递数据。

示例代码

html
<!-- 父页面 -->
</p>



    
    <title>父页面</title>
    


    <button id="openIframe">打开iframe</button>

    
    
        layui.use(['layer'], function() {
            var layer = layui.layer;

            document.getElementById('openIframe').onclick = function() {
                layer.open({
                    type: 2,
                    title: 'iframe页面',
                    content: ['iframe.html', 'yes'],
                    area: ['800px', '600px'],
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find('#dataDisplay').text('这是从父页面传递的数据');
                    }
                });
            };
        });
    



<p>

html
<!-- iframe页面 -->
</p>



    
    <title>iframe页面</title>


    <div id="dataDisplay"></div>



<p>

3. 使用URL参数传递数据

通过URL参数传递数据是一种常见的方法，适用于需要传递少量数据的场景。

示例代码

html
<!-- 父页面 -->
</p>



    
    <title>父页面</title>
    


    <button id="openIframe">打开iframe</button>

    
    
        document.getElementById('openIframe').onclick = function() {
            var url = 'iframe.html?key=value';
            document.getElementById('myIframe').src = url;
        };
    



<p>

html
<!-- iframe页面 -->
</p>



    
    <title>iframe页面</title>


    <div id="dataDisplay"></div>

    
        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 (decodeURIComponent(pair[0]) == variable) {
                    return decodeURIComponent(pair[1]);
                }
            }
            return null;
        }

        var value = getQueryVariable('key');
        document.getElementById('dataDisplay').innerText = value;
    



<p>

以上三种方法都可以实现从父页面向iframe传递数据，具体选择哪种方法取决于实际需求和应用场景。希望本文对您有所帮助！