Question

有没有办法将变量从1页面上的弹出iframe传递给客户端按钮单击弹出窗口（iframe）而不使用查询字符串？我的变量太大而无法使用查询字符串？

提出同一问题的另一种方式

有没有办法在客户端按钮单击时将变量从1页传递到另一页而不使用查询字符串？我的变量太大而无法使用查询字符串？

这适用于IE 8及更高版本的html 5存储无效

Answer 1

如果您的两个网页位于同一个域中，则可以使用HTML5 LocalStorage。它是一个JavaScript对象，可以容纳大约5MB左右的字符串。

如果需要存储除字符串之外的其他数据，可以使用JSON.stringify（）和JSON.parse（）在数据类型和字符串之间进行转换。

没有HTML5

您可以选择使用cookies并使用JavaScript获取/设置它们，否则there are many LocalStorage polyfills to choose from应该能够在受限制的环境中使用。

Answer 2

您可以从父级调用子窗口中存在的函数，并将数据从父级传递给子级。

我为这个非常基本的例子道歉，我们将变量dummy_txt中的任何内容从父窗口传递到子窗口。

父（parent.htm）

<html>
<body>
    <input id="btn" type='button' value='Open Window' />
    <script>

        var child_win;

        document.getElementById("btn").onclick = function () {
            child_win = window.open("child.htm");
            dummy_txt = 'blah blah blah blah blah...'
            setTimeout(function () { 
                child_win.document.write(dummy_txt); 
                // Hey, you can do child_win.my_own_function(dummy_txt)
            }, 2000);
        }

    </script>
</body>
</html>

儿童（child.htm）

<html><body></body></html>

Answer 3

不是最干净的方法，但您也可以通过让子iframe通过window.parent调用javascript函数来做类似于Nabil建议的操作

var myValueFromParent = window.parent.SomeFunctionOnParentFrame();

我使用此方法不是将值从父级传递给子级，而是将子级信号传递给父级。

Answer 4

尝试以下方法：

主页

<html>
    <head>
        <title>JS Iframe Test</title>
    </head>
    <body>      
        <iframe id="frame" src="js-test-iframe.htm"></iframe>
        <br /><br />
        <input type="text" id="toInject" /> <button id="send">Send To Iframe</button>        

        <script type="text/javascript"> 
            document.getElementById('frame').onload =  function(){  
                document.getElementById('frame').contentWindow.doSomething("Hi");                    
            }

            var btn = document.getElementById('send');

            btn.addEventListener("click", function(){
                var text = document.getElementById('toInject').value;

                document.getElementById('frame').contentWindow.doSomething(text);
                // window.frames[0].doSomething(text); // An alternative

            }, false);                  
        </script>
    </body>
</html>

IFrame Page （js-test-iframe.htm）

<html>
    <head>  
        <script type="text/javascript">
            function doSomething(text)
            {
                document.getElementById('valueHere').innerHTML = text;              
            }
        </script>
    </head>
    <body>
        <div id="valueHere">Default Text</div>
    </body>
</html>

请记住，您需要等待iframe加载，然后才能操作或将任何变量传递给它。另请注意，这仅适用于您在同一域中寻找网页的情况。

将变量传递到没有查询字符串的新页面

4 个答案:

没有HTML5

父（parent.htm）

儿童（child.htm）

主页

IFrame Page （js-test-iframe.htm）