Question

我正在编写一个Django网站，我也希望以Chrome扩展程序的形式提供这个网站。

扩展名将新标签页替换为我的Django网站的首页。 在页面加载时，我想要一个＆＃34; loading＆＃34;消息可见。

我首次尝试编写扩展程序时使用了Chrome的XHR示例代码，用AJAX加载的Django页面替换<html>的内容。但由于我的网页静态文件被引用为/script.js，因此一旦将代码嵌入到新标签页中，它们就无法正确解析。

我目前的解决方案：

<html>
 <head>
  <title>New Tab (External)</title>
  <style>
  div#loading {
    color: #cccccc;
    vertical-align: 50%;
    text-align: center;
    font-family: sans-serif;
    font-size: 300%;
  }
  iframe{
    overflow:hidden;
}
  </style>
 </head>
 <body>
  <div style="height:40%"></div>
  <div id="loading">Loading your Agenda...</div>
  <iframe src="http://localhost:8000" width="100%" height="100%" frameborder="0"></iframe>
 </body>
</html>

我当前解决方案的问题：

iframe有滚动条
iframe完成加载后，不确定如何使加载消息消失

编写此Chrome扩展程序是否有更好的方法？如果没有，我如何解决这两个问题？

Answer 1

您可以像首次尝试一样在新标签页的DOM中插入HTML，并在文档的<base href="http://your.site/frontpage/">标记中添加<head>以解决问题页面中的相对资源URL正确。我已对其进行了测试，动态创建<base>标记会影响相关链接。

或者，您只需将<base>标记添加到实际首页的HTML中即可。当页面直接加载时它仍然有效。

将外部网站嵌入新标签页的方法比使用Chrome扩展程序中的iframe更好吗？

1 个答案: