logo标签列表

从iFrame打开模态窗口到父窗口

jqueryhtmliframepopupmodal-dialog
4
我需要一些帮助，将一个模态框从 iFrame 添加到其父级 body 中。我听说过 jQuery 插件 SimpleModal，甚至尝试了它，但失败了。
所以我有一个页面和一个 iFrame，在这个 iFrame 内部有一个按钮，应该在父窗口中打开一个模态窗口。问题是我无法访问并放置代码到父窗口中，我只能访问 iFrame。
对于任何形式的帮助，我非常感激！
如果您无法访问父窗口（跨域iframe？？？），据我所知，您无法这样做。如果可以的话，这将是一个重大的安全问题，我可以想象到。话虽如此，您可以在服务器端代理父窗口，但我相当确定这不是您要寻找的内容。 - A. Wolff
@A.Wolff 但是，如果他在同一个域中，正如我想象的那样，在这种情况下，他可以利用 window.frameElement。如下所述，我曾不得不做到这一点。 - SpYk3HH
3个回答
5

没有任何示例代码，根据您的确切布局，要向您展示有点困难，但我可以给您一个我如何实现此目标的示例。请记住，所有内容都必须在同一域中，我会假设是这样。

我必须为我开发的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>
4
让我用代码来解释这个场景， 父级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>

HTML中的iframe

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

iframe JS

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

通过以下方式修改modal-body的内容：

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

GitHub上的问题讨论

这是有关IT技术的话题。
0

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();

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接