Question

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

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

那么如何将事件附加到父页面中iframe内的取消按钮？我还假设你会以某种方式将事件附加到iframe的DOM-ready上，否则该按钮将不存在。

你是怎么做到的？

此外，iframe位于同一域，因此没有跨域担忧

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

Answer 1

这会让你接近吗？

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>

Answer 2

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

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

然后在开场页面我说了这个：

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

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

Answer 3

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

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

3 个答案: