Question

我的Chrome扩展程序非常简单。单击弹出窗口后，将加载iframe。铬延伸稍慢。我点击图标，加载大约需要一秒半，我觉得这太慢了。我希望弹出窗口能够即时显示但是iframe加载后...或者可能有更快的方式...我在iframing的网站只有一个文本框可见所以理论上弹出窗口应该加载很快但我我只是没有得到它。

我的清单文件主要是：

"browser_action": {
"default_icon": "icon128.png",
"default_popup": "main.html"
 },
   "background": {
    "page": "main.html"
  }

Answer 1

任何异步调用都可能需要不确定的时间才能返回。一个干净的解决方案是简单地向main.html添加loading icon。在iframe加载后，只需隐藏加载图标。

它应该有助于用户体验，因为他们在点击图标后能够立即看到一些内容。

Answer 2

iframe会阻止页面加载。这意味着在您的iframe完全加载之前，该页面不会被视为“完成”加载，因为Chrome扩展程序会延迟并且不会显示。

此阻止行为与iframe行为有关，与Chrome无关。

要解决此问题，您应在不使用iframe或src属性为'about：blank'的iframe的情况下加载页面，并在加载页面时添加/更新iframe src属性。您还可以为iframe添加“ onLoad”事件，以检测iframe何时完成加载，以触发加载器/旋转器隐藏。

这是React中的一个例子

const Main = () => {
    // state for the loader
    const [loading, setLoading] = useState(true);
    
    // state for the iframe source url
    const [iframeSrc, setIframeSrc] = useState(null);

    // first useEffect to see that page is fully loaded (componentDidMount in class syntax)
    useEffect(() => {
        setIframeSrc('https://www.your-slow-website.com');
    }, []);

    return (
        <div style={{width: '200px'}}>
            {loading && <div>LOADING...</div>}
            {iframeSrc && (
                <iframe onLoad={() => setLoading(false)} src={iframeSrc} style={{border: 'none', width: '100%'}} />
            )}
        </div>
    );
};

加载chrome扩展弹出窗口更快

2 个答案: