如何将 URL 从一个 iframe 传递到另一个 iframe？答案

【问题标题】：how to pass a URL from one iframe to another iframe?如何将 URL 从一个 iframe 传递到另一个 iframe？
【发布时间】：2014-03-14 20:37:10
【问题描述】：

我创建了一个演示页面，在父窗口中有一个文本框，我在其中输入 URL，单击按钮后，URL 会加载到 iframe 上。它可以工作！

以下是相同的代码：

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<iframe id="display" src="http://jqueryui.com"></iframe>
<br>
<input type="text" id="url" value="http://jquery.com">
<button type="button" id="load">Load</button>

JS：

$(document).ready(function () {
    $('#load').click(function () {
        $('#display').attr('src', $('#url').val());
    });
});

这是第一个选项的小提琴（正在工作）：http://jsfiddle.net/Hs87s/

但是现在是问题，我想从一个 iframe 发送 URL 更改请求并在第二个 iframe 中加载 URL。

我所做的一切，添加了一个新框架，并在不同的 html 中添加了按钮和文本框，并在第二个 iFrame 中调用该 html 页面。但这不起作用。

下面是第二个选项的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    </script>
    <style>
        iframe {
            width: 100%;
            height: 200px;
        }
    </style>
</head>

<body>
    <iframe id="display" src="http://jqueryui.com"></iframe>
    <br>
    <iframe id="inputURL" src="button.html"></iframe>
</body>
</html>

button.html的代码：

<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        $(document).ready(function () {

                $('#load').click(function () {
                    //alert("hi");
                    parent.$('#display').attr('src', $('#url').val());
                });
            });

        </script>
    </head>

    <body>
        <input type="text" id="url" value="http://jquery.com">
        <button type="button" id="load">Load</button>
    </body>

有人可以建议我如何使第二个选项起作用吗？

如果您需要任何其他信息，请告诉我。

请提出建议。

【问题讨论】：

标签： javascript jquery ajax iframe query-string

【解决方案1】：

“按钮”框架可以通过添加“父”来访问任何父 JS 函数。在它前面，只要它们在同一个域中。

所以按钮框架将使用：

parent.functionname();

....那么父级将包含该函数。

编辑：

您的点击处理程序需要与您的按钮在同一页面中，并且您需要引用父级中的框架：

$(document).ready(function() {
    $('#load').click(function() {
        //alert("hi");
        parent.$('#display').attr('src', $('#url').val());
    });
});

【讨论】：

可能是我遗漏了一些东西，因为仍然无法工作......让我在我的问题中发布我更新的代码
jsfiddle.net 是你的朋友。
知道我在哪里犯错了吗？？