使用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");
或多或少从 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
}
这就像是指派事件一点点,只是你必须非常严格检查的起源人可以发送消息。
试试这个:
$("#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属性。
跨域跨越iframe边界会引发安全错误。你需要传递消息。 – Winchestro 2014-09-26 14:26:06
@TIMINeutron 如果父域和子域都在同一个域中,但域名不同,则您的代码将可以正常工作。你的代码不会工作 – 2014-09-26 14:40:08
@Winchestro你能解释一下吗?如果您有任何示例(URL)? – 2014-09-26 14:40:44
谢谢!这解决了我的问题:) – 2014-09-28 05:46:54