iFrame 在 Android + PhoneGap 上更改 window.innerHeight / window.innerWidth答案

【问题标题】：iFrame Changes window.innerHeight / window.innerWidth on Android + PhoneGapiFrame 在 Android + PhoneGap 上更改 window.innerHeight / window.innerWidth
【发布时间】：2020-02-16 11:01:37
【问题描述】：

我正在使用 Android 版 PhoneGap 创建一个应用程序。 App 中的一个页面包含一个 iFrame（包含本地内容），该 iFrame 大于其余页面（这是一个单页 App）。

我遇到的问题是，一旦查看 iFrame 页面，window.innerHeight 和 window.innerWidth JavaScript 对象就会更改它们的值以匹配 iFrame 的宽度/高度，这会导致其余“页面”显示不正确，因为它们的大小不同。

即使在我从 DOM 中删除 iFrame 后，这种情况仍然存在。

有没有人遇到过这种情况或有解决方法的想法？

【问题讨论】：

标签： android cordova

【解决方案1】：

我只是处于同样的情况，并且我删除了 iframe，解决方案（对我有用）是将下一个放在你的 html 头中：

<meta name="viewport" content="width=device-width, initial-scale=1">

我一直认为这部分是不必要的，因为innerWidth和innerHeight在桌面上并不复杂，但我花了6个小时。

我想知道它是否对你有用，再见。

【讨论】：

【解决方案2】：

首先，这里肯定有一个错误！

我刚遇到同样的问题并解决了，方法如下。对于比 window.innerWidth 更宽的那些，我将所有 iframe 和图像宽度更改为 100% 或更小。

下面是对应的HaxeJS代码：

    resizeNodeChildrenTag(_contentContainer,"iframe");
    resizeNodeChildrenTag(_contentContainer,"img");


private function resizeNodeChildrenTag(node:HtmlDom, tagName:String):Void
{
    var tagNodes:HtmlCollection<HtmlDom> = node.getElementsByTagName(tagName);
    // for all nodes with the given tag name
    for (i in 0...tagNodes.length)
    {
        if(tagNodes[i].clientWidth > Lib.window.innerWidth)
            tagNodes[i].setAttribute("width", "96%");
            tagNodes[i].setAttribute("height", "");
        }
    }
}

【讨论】：