Question

我有两个html文件Parent.html＆amp; Child.html。 Parent.html在iframe中导入jquery.js文件和Child.html。

Parent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$('body').click(function() {
 alert("asdgaskdj");
});
</script>
</head>
<body>
<!--Parent do  some thing-->
<iframe id="workspace"  style="width:100%;height:100%;overflow:auto;" src="Child.html">
</iframe>
</body>
</html>

Child.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
$('body').click(function() {
 alert("asdgaskdj");
});
</script>
</head>
<body>
<!--child do some thing-->
</body>
</html>

我的qustion已经由Parent.html导入了jquery 我应该在Child.html中再次导入它吗

如果我不在Child.html中导入，则显示$未定义。

Parent.html已经导入了255KB的js文件。 Child.html也想做同样的事情。如果是，那么必须再次从服务器下载255kb的文件。是否有其他方式可以达到解决方案。

Plz HELP !!!!!

Answer 1

您必须包含两次，但服务器会将其缓存。所以客户端第一次下载255KB，并记得它已经下载了文件，因此不会再下载它。

另请参阅w3c specification和此tutorial。您必须将以下行（例如）添加到.htaccess以启用缓存（默认情况下由大多数网络主机启用）：

 # Cache all your static assets for 1 month
 <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=2592000, public"
 </filesMatch>

此外，您可以启用gzip压缩，这将最大限度地减少流量。它在this tutorial中描述。

Answer 2

坏消息：你需要在每个需要它的框架中加载jQuery库。

好消息：浏览器会知道它已经请求了它，所以只需使用它的缓存副本而不是重新加载它。

您还可以进行进一步的改进：

如果您确定使用的是jQuery的缩小版本，它将显着降低您的下载大小 - 1.10.2从97KB增加到38KB。
如果启用gzip压缩，则会在下载过程中压缩文件，从而节省额外的带宽。
如果您使用CDN（例如Google），您可能会受益于已经拥有另一个网站引用的jQuery缓存副本的用户。因此，他们根本不需要下载它 - 它已经存在了。

Answer 3

您不希望在child.html中再次包含jQuery插件。

只需在window.parent之前插入$即可访问父jQuery插件。

<强> Child.html

<script>
  window.parent.$('body').click(function(){
      alert("asdgaskdj");
  });
</script>

iframe如何在iframe中使用父javascript文件

3 个答案: