Question

我已经查看了几个问题，这似乎是使用iframe打开网页的扩展程序的常见问题。我已经看到的解决方案是添加一个微调器gif并使用for循环让它在几秒钟后自动隐藏。我试图这样做，我无法让它工作。只有iframe加载后才显示gif（点击扩展图标后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"
    }
  }

如果我通过提出此问题而违反任何规则，请在下方发表评论，我将更正我的问题。

Answer 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 chrome扩展加载缓慢

1 个答案: