Javascript 如何将事件附加到iframe中的按钮_Javascript_Jquery_Dom_Iframe

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

javascript jquery dom iframe

Javascript 如何将事件附加到iframe中的按钮,javascript,jquery,dom,iframe,Javascript,Jquery,Dom,Iframe,现在我有一个jqueryui对话框，对话框内部有一个。当用户按下按钮时，对话框弹出，iframe中有一个表单编辑屏幕嗯，我想在内部表单编辑屏幕上有两个按钮，“取消”和“确定”。“取消”不保存更改并关闭对话框，“确定”保存更改并关闭对话框。很简单那么，如何从父页面将事件附加到iframe内部的cancel按钮？我还假设您需要以某种方式将事件附加到iframe的DOM ready，否则按钮将不存在你是怎么做到的另外，iframe在同一个域上，因此没有跨域的担忧这里有一个简单的例子，这能让你

现在我有一个jqueryui对话框，对话框内部有一个

。当用户按下按钮时，对话框弹出，iframe中有一个表单编辑屏幕

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

那么，如何从父页面将事件附加到iframe内部的cancel按钮？我还假设您需要以某种方式将事件附加到iframe的DOM ready，否则按钮将不存在

你是怎么做到的

另外，iframe在同一个域上，因此没有跨域的担忧

这里有一个简单的例子，

这能让你接近吗

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>


$（文档）.ready（函数（）{
$（'#diag'）。对话框({
身高：100，
宽度：100，
自动打开：错误
});
$（“#编辑按钮”）。单击（函数（）{
$（'diag iframe'）.attr（'src'，'modal.html'）；
$（'diag'）。对话框（'open'）；
});
$（“#diag iframe”）.load（函数（）{
$（“#诊断iframe”）.contents（）.find（“#取消按钮”）。单击（函数（）{
//关闭对话框
});
});
});

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

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

然后在开篇我写了这样一句话：

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

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

你能发布一些html结构以便更容易地模仿你正在使用的吗？@spin完全滥用了jsbinOk，我刚刚发布了一个回复。我制作了一些jsbin示例来演示，但我忘记了我得到的数字。答案应该很容易理解。我不想关闭父窗口，只有jQueryUI对话框（它不是一个实际的窗口）我不知道在哪里，但在某个地方它得到了一个“Selection is null”错误。另一种说法是：我相信这样做就行了。对于iFrame，最好使用.load（）事件并使用.contents（）访问源文档。想起来很容易，但要想弄清真相需要一些思考。

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