0

我有一个包含动态内容的 iframe，需要在页面上显示，我希望它尽快显示。但是，加载 iframe 的内容与在主机页面上调整 iframe 的大小之间似乎存在一些滞后。目前，iframe 的初始尺寸为 height = 0 和 width = 100%，因此当 iframe 中加载内容时，iframe-resizer 会自动将其调整为正确的高度。

但是，我注意到如果 iframe 中有自动播放视频，我可以在 iframe 调整大小之前听到音频长达一分钟。检查浏览器控制台时，我会看到 iframe-resizer 无响应的警告消息，但大约一分钟后，iframe 将调整大小并显示内容。

我在 iframe 内容中有一个谷歌分析跟踪代码，并注意到如果我删除它，iframe-resizer 的响应速度会更快，内容加载速度也会更快。如何让 iframe 响应其中运行的谷歌分析跟踪代码？如何在 GA 脚本完成加载之前让 iframe-resizer 工作？

此外，是否将初始 iframe 高度设置为 0，然后允许 iframe-resizer 以正确的方式调整框架大小以初始加载动态 iframe 内容？

编辑（添加代码）：这是我在主机页面上运行的代码

var hzframe = iFrameResize({
    checkOrigin: false,
    initCallback: function(){
        var x = document.getElementsByClassName("hzload");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
    },
    resizedCallback: function() {
        var x = document.getElementsByClassName("hzload");
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
    }
},".hzframe");

如果您想查看整个过程，可以查看此jsfiddle

目前，我有相同的代码在 initCallback 和 resizedCallback 中隐藏加载 gif，因为 gif 并不总是被 initCallback 隐藏。

4

1 回答 1

0

如果您只是在 iFrame 中托管视频，那么这可能更适合您。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

GA 的问题很奇怪，如果它阻止了页面加载事件的触发，你能推迟它的运行吗？

于 2017-11-08T18:43:11.503 回答