iframe chrome 扩展加载缓慢答案

【问题标题】：Iframe chrome extension slow to loadiframe chrome 扩展加载缓慢
【发布时间】：2016-05-21 01:10:11
【问题描述】：

我查看了几个问题，这似乎是使用 iframe 打开页面的扩展程序的常见问题。我见过的一个解决方案是添加一个微调器 gif，并使用 for 循环在几秒钟后自动隐藏它。我试图这样做，但我无法让它工作。 gif 仅在 iframe 加载时出现（我单击扩展图标后 4 秒以上）

HTML：

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Google</title>
    <style>
html, body {
margin:0;
padding:0;
}
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
    background-color: white;
    overflow-y:hidden;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    p{
            visibility:visible;
    }


    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="status">
<img src="spinner.gif"/>
<iframe src="https://www.google.com/" width="398" height="100%" frameborder="0"></iframe> 

</body>
</html>

js:

for (var i = 1; i == 10; i++) {
document.getElementById(img).style.visibility = "hidden";
}

清单文件：

  {
"manifest_version": 2,
"name": "Open google",
"version": "1",
    "browser_action": {

      "default_icon": { 
        "19": "icon.png",
        "38": "icon.png"
      },
      "default_title": "Webpage opener",
      "default_popup": "popup.html"
    }
  }

如果我提出这个问题违反了任何规则，请在下面发表评论，我会更正我的问题。

【问题讨论】：

标签： javascript jquery html google-chrome plugins

【解决方案1】：

首先，我不知道从什么时候开始，但我们无法在 iframe 中显示 Google.com。 (How to show google.com in an iframe?)

假设您想改为打开 Bing。

作为理性思考，答案是这样的。

您可能有如下 popup.html：

<html>
<head>
  <title>Google</title>
</head>
<body>
  <img style="display: block" src="spinner.gif" />
  <iframe style="display: none" src="http://www.bing.com/" width="" height="100%" frameborder="0"></iframe>
  <script src="jquery.js"></script>
  <script src="popup.js"></script>
</body>
</html>

这很简单。首先，我们显示微调器，并隐藏 iframe。然后为了达到你的预期，脚本可能看起来像

$('iframe').load(function () {
    $('iframe').css('display', 'block');
    $('img').css('display', 'none');
});

对于 Google.com 或 Bing.com 等一些闪电般的页面，您可能看不到微调器。

但事实上

谷歌浏览器非常聪明，它会等到 iframe（或所有 iframe）加载完毕，然后才会显示弹出窗口。

因此，不需要微调器。

【讨论】：

我尝试了您发送给我的内容，但微调器永远不会被 iframe 取代。微调器也需要一些时间才能出现。
我计划将来将此扩展程序转到 bing 和 google 以外的页面，因此需要微调器。
我在 Win10 上使用 Chrome 50。你的呢？
我在 ubuntu 14.4 上使用 chrome 50
如果你想看看它对我来说是什么样子，我可以给你一个截屏视频。