如何将事件附加到 iframe 中的按钮答案

【问题标题】：How to attach an event to a button in an iframe如何将事件附加到 iframe 中的按钮
【发布时间】：2010-07-22 18:33:17
【问题描述】：

现在我有一个 jQuery UI 对话框，对话框内有一个 <iframe>。当用户按下一个按钮时，对话框会弹出一个 iframe 中的表单编辑屏幕。

嗯，我想在内部表单编辑屏幕中有两个按钮，“取消”和“确定”。 Cancel 不保存更改并关闭对话框，ok 保存更改并关闭对话框。很简单。。

那么如何从父页面将事件附加到 iframe 内的取消按钮？我还假设您需要以某种方式将一个事件附加到 iframe 的 DOM 就绪，否则该按钮将不存在。

你是怎么做到的？

另外，iframe 是同域的，所以不用担心跨域

这里有一个简单的例子at jsbin 和iframe source

【问题讨论】：

你能发布一些你的 html 结构，以便更容易模仿你正在使用的东西吗？
@spin 完全滥用了 jsbin
好的，我刚刚发布了回复。我制作了一些 jsbin 示例来演示，但我忘记了我得到的数字。不过，答案应该很容易理解。

标签： javascript jquery dom iframe

【解决方案1】：

好的，这就是我为实现此目的所做的。我将此代码添加到 iframe 页面：

$(document).ready(
  function()
  {
    $("#cancelbutton").click(
      function()
      {
        parent.CloseDialog();
      });
  });

然后在开始页面我放了这个：

function CloseDialog()
{
  $('#diag').dialog('close');
}

因此，我没有尝试从框架中关闭对话框，而是在父页面中调用一个方法来关闭它。相同的效果，但更容易。似乎无法让我使用对话框方法。但这行得通。

【讨论】：

【解决方案2】：

这会让你接近吗？

DialogBox.html：

<body>
    <input type="submit" value="Edit" id="editbutton" />
    <div id="diag">
        <iframe src="/" ></iframe>
    </div>
    <script>
        $(document).ready(function(){
        $('#diag').dialog({
            height: 100,
            width: 100,
            autoOpen: false
        });

        $('#editbutton').click(function(){
            $('#diag iframe').attr('src','modal.html');
            $('#diag').dialog('open');
        });

        $("#diag iframe").load(function() {
            $("#diag iframe").contents().find('#cancelbutton').click(function() {
                //close dialog here
          });
        });
      });
    </script>
</body>

【讨论】：

我不知道在哪里，但在某个地方出现“选择为空”错误。另一个版本在这里：jsbin.com/ayoyo3/3
我相信会做到的。对于 iframe，最好使用 .load() 事件并使用 .contents() 获取源文档。想起来很容易，但要深入了解它需要一些思考。

【解决方案3】：

onclick="parent.window.close();"

【讨论】：

我不想关闭父窗口，只关闭 jQueryUI 对话框（不是实际窗口）