如何通过父HTML向iframe传递参数？

Question

我有一个HTML页面，在其中以编程方式设置iframe的src。我该如何通过iframe src传递参数并在子HTML中获取它们？

以下是我的代码：

<iframe id="myIframe" src="" height="250px"  width="100%" scrolling="yes" frameborder="0"></iframe>

function myFunction(){
$('#myIframe').attr('src', "myIframeRequest.html"); 
}

- JavaLearner

---

在地址后面添加 ?parameters，然后在 iframe 中检查 location.search。 - Teemu

iframe 是否在一个 iframe 中？如果不是，则您的 jQuery 代码将在同一页中的 iframe 上运行，请确保将其包装在 ready 函数中或将其放置在页面底部，紧靠关闭 body 标记之前。 - Billy

location.search工作正常。谢谢Teemu。 - JavaLearner

我在这里描述了该过程 https://alfilatov.com/posts/how-to-pass-data-between-iframe-and-parent-window/ 和这里 https://alfilatov.com/posts/how-to-pass-file-into-an-iframe-and-convert-it-to-blob-for-further-ajax-request/（用于文件传输）。 - Alex Filatov

Answer 1

在主页面上，只需按照以下方式传递参数

function myFunction(){
$('#myIframe').attr('src', "myIframeRequest.html?param1=value1&param2=value2"); 
} 

在Iframe中

你可以使用脚本从传递给页面的参数中获取所需参数值。

<script>
function getParamValue(paramName)
{
    var url = window.location.search.substring(1); //get rid of "?" in querystring
    var qArray = url.split('&'); //get key-value pairs
    for (var i = 0; i < qArray.length; i++) 
    {
        var pArr = qArray[i].split('='); //split key and value
        if (pArr[0] == paramName) 
            return pArr[1]; //return value
    }
}
</script>

那么您可以像这样获取所需参数的值

var param1 = getParamValue('param1');

- rasso

---

在 return pArr[1] 之前，您可能需要添加 pArr[1] = decodeURI(pArr[1])。 - Fabio Magarelli

如果您不介意在每次需要传递数据时重新加载iframe中的页面，那么这是可以的。但是，如果您只想传递数据而不重新加载页面，则不是理想的选择。为了避免重新加载页面，请参考此解决方案：https://dev59.com/5XRB5IYBdhLWcg3wuZU1#41594695 - Johann

Answer 2

如果您对iframe沙盒有更多的控制，可以尝试使用 postMessage API与您希望触发事件的消息进行通信。

- Shobhit Sharma

Answer 3

你应该创建一个服务器端页面，例如(myIframeRequest.php) php/jsp，并在该页面中获取参数的值。如果它是一个HTML页面，那么可以通过JavaScript解析window.location.href并查找查询/参数来获取相应的值。

- Deepak David