打开从iFrame到父窗口的模态窗口
问题描述:
我需要一些帮助将模式从iFrame附加到它的父主体。我听说过jQuery插件SimpleModal甚至尝试过,但失败了。打开从iFrame到父窗口的模态窗口
所以我有一个页面与iFrame和里面这个iFrame有一个按钮,应该在父窗口中打开一个模式窗口。问题是我没有权限将代码放入父窗口。我只能访问iFrame。
对于任何形式的帮助,我非常感谢!
答
没有任何示例代码,它很难根据你的确切布局显示你,但我可以给你一个我如何实现这个目标的例子。请记住,每件事都必须在同一个领域,我会假设它是。
我必须为我已经开发了一个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>
答
让我与我的这种情况下的代码解释,
父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');
答
window.parent.show_messageNew(标题,内容)的内容;
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();
}
如果您无权访问父窗口(跨域iframe ???),则无法创建。如果可以的话,这将是一个主要的安全问题,我可以想象得到。这就是说,你可以将服务器端代入父窗口,但我确信这不是你正在寻找的 – 2014-10-28 16:29:09
@ A.Wolff *但*,如果他在同一个域上,就像我想象的那样这样的例子,他可以使用'window.frameElement'。如下所述,我不得不这样做 – SpYk3HH 2014-10-28 17:03:33