Question

我在页面中有一个iFrame，我希望Jquery对话框以父对象为中心，而不是iFrame。

我找不到办法做到这一点......

当我单独运行iFrame页面时，这是有效的：

var LLopt = {
     position: {my: "center center", at: "center center", of: parent.top}
}; 
$("#locationdisplaybox").dialog(LLopt).dialog("open");

...但是当我尝试在父级中运行它时，我不会在控制台中出现错误，但它不会运行（就好像有一个看不见的错误）。

我认为这是因为从iFrame访问父级的安全限制。

如果我运行上面没有“of：window.parent.top”如果工作正常，但是我在iFrame页面中较低，对话框出现的位置越低（不居中）。

有谁知道我怎么能把这个放在中心？

要查看问题的实际效果please see here，然后点击一些“查看场地详情”链接。

Answer 1

我认为这是因为从iFrame访问父级的安全限制。

如果页面不是来自同一个来源，则无法从典型iframe中访问有关父级的任何内容。 Here's a good explanation of same origin。

如果您的主页和您的iframe DO具有相同的来源，那么您可以非常轻松地从iframe访问父级。尝试从iframe中将这些值输出到控制台，看看你得到了什么：

console.log(window.document);     // will give you the document of the iframe
console.log(document);            // same as window.docuent

console.log(parent.document);     // will give you the main/parent document! 
                                  // parent refers to the parent of the current frame
console.log(top.document);        // same as above (if you only have one level of frames)
                                  // top refers to the outermost frame

console.log(window.frameElement); // will give you the frame element itself

所以，使用jQuery，如果你想要的元素是iframe的直接父元素，你可以使用...

 var $iframeParent = $(window.frameElement).parent();

或者如果你想在顶部或父窗口中有一些元素，你知道元素的选择器是什么......

var $myElement = $(parent.document).find(someselector);
// or
var $myElement = $(top.document).find(someselector);

其他一些选择：

如果您将iframe宽度设为父级的100％，那么您可能会获得所需的效果。
试用seamless attribute for iframe。

FWIW - 我认为你的样子很好看！

Answer 2

同源政策将阻止你做任何事情。我假设您是whygo.com的开发人员，videoconferencingbookingsystem.com属于其他人。在这种情况下，您需要让他们在自己的页面中嵌入一些Javascript，就像Google Analytics所做的那样：https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

如果没有这个，你将无法从父母那里得到任何东西。 iframe的内容从父级访问任何内容都是一个安全问题，因为您基本上可以代替父级用户。

Answer 3

如果你能得到高度和宽度，请试一试：

var dlgWidth = 750;
var dlgHeight = 300;

var dlgX = (window.innerWidth - dlgWidth)/2;
var dlgY = (window.innerHeight - dlgHeight)/2;

var LLopt = {position: [dlgX,dlgY], width: dlgWidth, height: dlgHeight};

$("#locationdisplaybox").dialog(LLopt, dlgWidth);

您可以在此链接中查看完整的对话框定义和方法

http://api.jqueryui.com/dialog/

String：表示视口中位置的字符串。可能的值：“center”，“left”，“right”，“top”，“bottom”。

Array：包含x，y坐标对的数组，从左上角开始的像素偏移   视口的一角或可能的字符串值的名称。

从页面上的iFrame内部的父级中心Jquery对话框

3 个答案: