【问题标题】：opening modal window from iFrame into parent window从 iFrame 打开模态窗口到父窗口
【发布时间】：2014-10-28 16:26:22
【问题描述】：

我需要一些帮助，将模态框从 iFrame 附加到它的父正文。我听说过 jQuery 插件SimpleModal 并尝试过，但失败了。

所以我有一个带有 iFrame 的页面，在这个 iFrame 内有一个按钮，应该在父窗口中打开一个模式窗口。问题是我无权将代码放入父窗口。我只能访问 iFrame。

对于任何形式的帮助，我都非常感谢！

【问题讨论】：

如果您无权访问父窗口（跨域 iframe ？？？），您无法 afaik。如果可以的话，这将是我可以想象的一个主要安全问题。也就是说，你可以代理服务器端的父窗口，但我很确定这不是你要找的
@A.Wolff 但是，如果他在同一个域中，就像我想象的那样，他可以使用window.frameElement。如下所述，我必须这样做

标签： jquery html iframe popup modal-dialog

【解决方案1】：

没有任何示例代码，很难根据您的确切布局向您展示，但我可以给您一个示例，说明我是如何实现这一点的。请记住，所有内容都必须位于同一个域中，我认为是。

我必须为我开发的 CRM 执行此操作，以下是我如何执行此操作的示例：

父 HTML

<body>
    <div id="myModal">stuff</div>

父级JS

<script>
    $(function() {
        $('#myModal').someDialogPlug({ some: options });
    })
</script>

iFrame HTML

<button id="btnPopModal">click me</button>

iFrame JS

<script>
    $(function() {
        $('#btnPopModal').on('click', function(e) {
            //  here's the fun part, pay attention!
            var $body = $(window.frameElement).parents('body'),
                dlg = $body.find('#myModal');
            dlg.someDialogPlugin('open');
        });
    })
</script>

【讨论】：

【解决方案2】：

让我用我的代码来解释这个场景，

父 HTML

<div id="CatModal" class="modal fade" role="dialog">

<div class="modal-dialog ">

    <!-- Modal content-->
    <div class="modal-content">

        <div class="modal-body">

        </div>

    </div>

</div>

iframe HTML

<button id="btnPopModal">click me</button>

iframe JS

window.parent.$('#CatModal').modal('show');

将modal-body的内容改为

window.parent.$('.modal-body').html('content stuff');

Issue Discussion in GitHub

【讨论】：

【解决方案3】：

window.parent.show_messageNew(title, content);

function show_messageNew(title, content)
{
    $('#myModal_Title').html(title);
    $('#myModal_Content').html(content);
    $('#myModal_Message').modal().css(
            {
                'margin-top': function () {
                    //var offss = $(this).height() - window.parent.scrollY;
                    var offss = window.parent.scrollY;
                    console.log(offss);
                    return offss;
                }
            });
    //debugger;
    $('#myModal_Message', window.parent).modal();

}

【讨论】：