在頁面上的iFrame內的父級中心jQuery對話框

我有一個頁面中的iFrame，我想要一個JQuery對話框居中父母，而不是iFrame。在頁面上的iFrame內的父級中心jQuery對話框

我不能找到一種方法，但做到這一點...

當我運行單獨的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，然後點擊一些「查看場地詳情」鏈接。

來源

2013-08-02 iKode

您可以在http://jsfiddle.net中創建一個簡化版本來演示問題嗎？ –

@iKode iFrame需要與父頁面的寬度一樣寬。無法打開比iframe更寬的模式。 – hitautodestruct

[圖片說明]（http://tinypic.com/r/evb4eq/5） – hitautodestruct

如果你能得到的高度和寬度，給這一個鏡頭：

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/

字符串：表示視口內位置的字符串。可能的值：「中心」，「左」，「右」，「頂部」，「底部」。

陣列：含有一個X的數組，y座標對在象素偏移從左上角的 角視口或可能的字符串值的名稱。

來源

2013-08-05 19:43:29 adam

我相信這是因爲從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 - 我認爲你看起來很好！

來源

2013-08-06 21:19:01 Luke

你的意思是同源政策嗎？它僅適用於（默認情況下）來自不同域的頁面。 –

@NabilKadimi你是對的！我做了一些研究並通過回答進行修改。謝謝。 – Luke

同源政策會阻止你做任何事情。我假設你是whygo.com的開發者，而videoconferencingbookingsystem.com屬於其他人。在這種情況下，你需要讓他們在他們的頁面中嵌入一些Javascript，比如谷歌分析所做的：https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

這就是你不能夠得到任何東西來自父母。對於iframe的內容來說，訪問父項的任何內容都是一個安全問題，因爲您基本上可以代替父項的用戶。

來源

2013-08-12 11:42:17

在頁面上的iFrame內的父級中心jQuery對話框

回答

相關問題