javascript - 使用 jQuery/JavaScript 从 iframe 以事件屏幕为中心的 DIV

Question

我有一个很长的页面(比如 2500 像素)，上面有链接。当我单击任何链接时，我会打开一个以屏幕为中心的 DIV(使用 jQuery 窗口高度、滚动位置等 - 下面添加的代码)。

当我直接使用浏览器浏览页面时它工作正常但是当我使用 iframe 将此页面(尤其是在 WordPress 中)包含在任何其他页面中时，以屏幕为中心的 div 代码无法按预期工作并根据高度显示弹出窗口的 iframe。我的意思是它需要完整的 iframe 作为事件窗口。

我该如何解决这个问题？我的意思是即使从 iframe 单击链接，我也想显示以屏幕为中心的 DIV。

注意:父页面和子页面位于不同的域中。Parent = 具有 iframe 的页面将以我的页面为源 child =我的页面

这是我正在使用的以屏幕为中心的代码

$("#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");

Answer 1

或多或少复制粘贴自 https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

您从一个窗口传输您的变量

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
    }

这有点像调度事件，只是您必须非常严格地检查来源，因为任何人都可以发送消息。