Ajax 将外部站点嵌入到新标签页中比在Chrome扩展中嵌入iframe更好吗?
我正在写一个Django网站,我也想以Chrome扩展的形式提供它 扩展将用my Django网站的首页替换您的新标签页页面加载时,我希望“加载”消息可见。 我第一次尝试编写扩展时使用了Chrome的XHR示例代码,用AJAX加载的Django页面替换Ajax 将外部站点嵌入到新标签页中比在Chrome扩展中嵌入iframe更好吗?,ajax,django,google-chrome,iframe,google-chrome-extension,Ajax,Django,Google Chrome,Iframe,Google Chrome Extension,我正在写一个Django网站,我也想以Chrome扩展的形式提供它 扩展将用my Django网站的首页替换您的新标签页页面加载时,我希望“加载”消息可见。 我第一次尝试编写扩展时使用了Chrome的XHR示例代码,用AJAX加载的Django页面替换的内容。但是由于我的网页的静态文件被引用为/script.js,一旦代码嵌入到新的选项卡页面中,它们就无法正确解析 我当前的解决方案: <html> <head> <title>New Tab (Exter
的内容。但是由于我的网页的静态文件被引用为/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>
新选项卡(外部)
分区#加载{
颜色:#中交;
垂直对齐:50%;
文本对齐:居中;
字体系列:无衬线;
字体大小:300%;
}
iframe{
溢出:隐藏;
}
正在加载您的议程。。。
我当前解决方案的问题:
<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完成加载后使加载消息消失
如果没有,我如何解决这两个问题呢?您可以像第一次尝试那样将HTML注入新选项卡页面的DOM中,并向文档的
标记添加
,以便正确解析页面中的相对资源URL。我已经对它进行了测试,动态创建
标记会像预期的那样影响相对链接
或者,您可以将
标记添加到实际首页的HTML中。当直接加载页面时,它仍然可以工作。仅仅呈现一个“加载”屏幕并实际重定向到您的首页不是更容易吗?@lanzz不幸的是,这干扰了Chrome新标签页的一些细节——即时重定向阻碍了那些试图在打开新标签后立即开始键入新URL的人。哇,我不知道
标签——谢谢你的建议!CSS加载正常,但我的实际首页的JS脚本似乎没有被执行(尽管Chrome Inspector没有抱怨)。Inspector中的“网络”选项卡表明我的Javascript文件根本没有加载——你知道这是Chrome权限错误还是其他什么吗?请在DOM中发布加载和注入页面的代码。