使用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

回答

相关问题