Question

我有一个在iframe中加载的应用。代码看起来像这样（样本）：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
    <iframe src="app_url_on_a_different_domain" height=100% width=100%>
        <html>
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
            </head>
            <body>...</body>
        </html>
    </iframe>
</body>
</html>

我试图通过执行以下操作从iframe内部获取视口高度（iframe src是一个不同的域，因此我无法访问父容器）：

document.documentElement.clientHeight

这为我提供了桌面浏览器的正确视口;然而，在移动safari / chrome上，我获得了iframe中所有内容的高度，而不是获得实际的设备高度。因此，在iPhone 5上取代“460”而不是“3000”。

如何从此iframe中获取可用的视口？

Answer 1

所有现代浏览器都不允许从不同的域（即不同的源）执行此操作。这就是答案。

为什么你认为什么是替代路线？

您只能从脚本的起源位置获取信息。因为，如果您可以访问Screen对象以及任何其他人，则可以访问prototype链（通过__proto__）。通过此链，您可以访问Object并重新定义所有对象的所有getter和setter。并从iframe控制父页面。它将失败，facepalm等等。

从没有门的房间找到出口是天真的。

如何从移动设备上的iframe中找到设备高度？

1 个答案: