如何解决window.matchMedia 不适用于 iframe 1) 将 iFrame 大小更改为 100%，以便在横向/纵向方向事件触发时调整大小2) 主页上的媒体查询检测，并在方向事件触发时使用 postMessage 向 iFrame 发送消息index.html：iframe.html：
我正在使用 window.matchMedia 检测设备方向。以下代码按预期工作 - 每个方向更改都以正确的值记录到控制台：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Test App</title>
</head>
<body>
<script type="application/javascript">
let isIframe= () => {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
let onorientationChange = () => {
const isLandscape = window.matchMedia("(orientation: landscape)").matches;
console.log("Event: " + (isIframe() ? "Iframe " : "") + "landscape:" + isLandscape);
}
let mediaQueryList = window.matchMedia("(orientation: landscape)");
console.log("Onload: " + (isIframe() ? "Iframe " : "") + "landscape:" + mediaQueryList.matches);
mediaQueryList.addListener(onorientationChange);
</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">Hello World in Iframe</div>
</body>
</html>
但是当我在 iframe 中运行该页面时，不会触发使用 addListener 注册的回调。在 iframe 中，无论设备方向如何，我都只会得到单个日志行 - Onload: Iframe landscape:true。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">Hello World</div>
<iframe id="game" src="iframeContent.html" frameborder="0" style="width: 960px; height: 600px;"></iframe>
</body>
我使用 addListener 而不是 addEventListener，因为第二个功能不适用于所有 Safari 版本。
在 Safari 14 以及 Chrome 和 Firefox 的开发工具上测试。
我的问题是 - 为什么 addListener 中没有调用 iframe 回调。
谢谢。
解决方法
如果 iframe 没有改变它的大小，因为它有固定的宽度和高度，因此无法在其中触发与调整大小相关的事件，包括关于 orientation 的 MediaQueryList 事件。
你可以做两件事来让它工作；您可以将 iFrame 的宽度和高度设为 100%，也可以让媒体查询检测代码位于主窗口内，并在触发更改事件时使用 postMessage 传递方向状态。
1) 将 iFrame 大小更改为 100%，以便在横向/纵向方向事件触发时调整大小
在主页面中，使正文全高和 iframe 全宽/高（使用 CSS）。
body {
height: 100vh;
margin: 0;
}
iframe {
width: 100%;
height: 100%;
}
您可以测试的现场示例：https://zikro.gr/dbg/so/65704468/
2) 主页上的媒体查询检测，并在方向事件触发时使用 postMessage 向 iFrame 发送消息
index.html：
<iframe src="iframe.html"></iframe>
<script>
let iframe = document.querySelector('iframe');
let onOrientationChange = () => {
iframe.contentWindow.postMessage({
isLandscape: window.matchMedia("(orientation: landscape)").matches
},'*');
}
iframe.addEventListener('load',onOrientationChange);
const mediaQueryList = window.matchMedia("(orientation: landscape)");
mediaQueryList.addListener(onOrientationChange);
</script>
iframe.html：
<script>
window.addEventListener("message",(event) => {
if (event.data.isLandscape) {
console.log('iFrame Landscape');
} else {
console.log('iFrame Portrait');
}
});
</script>
您可以测试的现场示例：https://zikro.gr/dbg/so/65704468/pm/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
