使用jQuery/JavaScript的iframe中的活動屏幕中心DIV

我有一個冗長的頁面（比如2500px），它有鏈接。當我點擊任何鏈接時，我打開一個屏幕居中的DIV（使用jQuery窗口高度，滾動位置等 - 下面添加的代碼）。使用jQuery/JavaScript的iframe中的活動屏幕中心DIV

當我使用瀏覽器直接瀏覽頁面時，它的工作正常，但是當我使用iframe在任何其他頁面中包含此頁面（特別是在WordPress中）時，屏幕居中的div代碼不按預期工作，並顯示根據iframe的高度。我的意思是它需要完整的iframe作爲活動窗口。

我該如何解決這個問題？我的意思是我想要顯示屏幕居中的DIV，即使鏈接是從iframe中點擊。

注：父頁和子頁在不同的域上。父=頁面是有iframe中，將有我的網頁源兒童=我的頁面

這裏是屏幕中心的代碼，我使用

$("#myDiv").css("position","absolute"); 
$("#myDiv").css("top", Math.max(0, (($(window).height() - $("#myDiv").outerHeight())/2) + $(window).scrollTop()) + "px"); 
$("#myDiv").css("left", Math.max(0, (($(window).width() - $("#myDiv").outerWidth())/2) + $(window).scrollLeft()) + "px");

來源

2014-09-26 Muhammad Gulfam

或多或少從 https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

copypasted您從一個窗口

otherWindow.postMessage(message, targetOrigin, [transfer]);

轉移你的變量到另一個。

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) { 
    if (event.origin !== "http://example.org:8080"){ 
     return; 
    }else{ 
     // get data from the event and update it 
    }

這就像是指派事件一點點，只是你必須非常嚴格檢查的起源人可以發送消息。

來源

2014-09-26 15:16:08 Winchestro

謝謝！這解決了我的問題:) – 2014-09-28 05:46:54

試試這個：

$("#myDiv").css("position","absolute"); 
$("#myDiv").css("top", Math.max(0, (($(window.parent).height() - $("#myDiv").outerHeight())/2) + $(window.parent).scrollTop()) + "px"); 
$("#myDiv").css("left", Math.max(0, (($(window.parent).width() - $("#myDiv").outerWidth())/2) + $(window.parent).scrollLeft()) + "px");

說明：您使用window.parent的上下文來查找和修改css屬性。

來源

2014-09-26 14:21:41 tfrascaroli

跨域跨越iframe邊界會引發安全錯誤。你需要傳遞消息。 – Winchestro 2014-09-26 14:26:06

@TIMINeutron 如果父域和子域都在同一個域中，但域名不同，則您的代碼將可以正常工作。你的代碼不會工作 – 2014-09-26 14:40:08

@Winchestro你能解釋一下嗎？如果您有任何示例（URL）？ – 2014-09-26 14:40:44

使用jQuery/JavaScript的iframe中的活動屏幕中心DIV

回答

相關問題