Question

在我的网页上，我有几个标签，在其中一个标签中，我想显示一个包含Google文档的iframe。显示iframe时，加载了Google doc并且没有问题。但默认情况下，此选项卡是隐藏的（因此，内部也是iframe）

像

这样的东西

<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>

用jquery来处理动作

并且，当iframe被隐藏时，它似乎无法加载，直到它不再被隐藏。问题是我无休止地弹出说法

此错误已报告给Google，并将尽快进行检查。要继续，请刷新页面。

在没有标签的页面中，如果iframe具有＆＃34;隐藏＆＃34;属性，也会发生错误
我可以通过＆＃34;隐藏＆＃34;来解决问题。 iframe为＆＃34; heigth = 0＆＃34;但当它隐藏在标签中时，问题就会出现

你有没有遇到这个问题并找到解决方法？我是否必须动态加载＆＃34;谷歌文档iframe何时变得可见？（然后，怎么样？）感谢

Answer 1

我不介意iframe是否稍后加载所以我决定在打开选项卡时使用jquery加载<iframe>，方法是将src存储到属性中。

但是，如果在iframe未完全加载的情况下关闭选项卡，则可能会出现问题。这就是为什么我通过在更改选项卡时停止加载来阻止这种情况，（如果已经完全加载则不要这样做。）

HTML

<iframe data-src="https://docs.google.com/document/d/......" 
        class="google-doc"></iframe>

jquery的

//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')

//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();

var iframetoload = $(".tab-to-open iframe.google-doc");

//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))

//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
   $(this).addClass('isloaded');
});

隐藏的Google文档iframe无法加载

1 个答案: