导入HTML代码插入其他的文件

我只是一个项目今天的工作，并注意到我复制和粘贴的内容很多，当它来到在导航部分的工作，我想知道如果有导入的方式html剪切成不同的html文件，所以我不必保持复制和粘贴。我试图通过使用“链接”标签来解决这个问题。这是设置是这样的：导入HTML代码插入其他的文件

的index.html

<div> <link rel="import" href="nav.html"> </div>

nav.html

<a class="nav-link" href="reviews.html">Reviews</a> 
<a class="nav-link" href="trending">Trending</a> 
<a class="nav-link" href="contact">Contact</a> 
<a class="nav-link" href="about">About</a> 
<a class="nav-link" href="blog">Blog</a>

然而，我注意到，这是行不通的，而我不能让nav.html内容导入到index.html文件中。所以，而不是这个，我不得不继续复制和粘贴。

请让我知道，如果你有一个解决的办法。提前致谢！

来源

2015-04-03 Greg Development

也许'iframe'？但我推荐一个服务器端解决方案。 – Oriol 2015-04-03 21:33:58

什么浏览器？你确定该浏览器的版本是否支持HTML导入？你的JS控制台中有任何错误？ – 2015-04-03 21:35:10

我想iFrame会创建一个延迟，因为它没有直接从另一个文件上传到网站的代码，但感谢您的建议！ – 2015-04-03 23:54:21

假设你有没有服务器应用程序的工作，你可以用一些简单的AJAX做到这一点 - 它会采取额外的分裂秒的导航出现，但它会做的伎俩。

如果你有jQuery的，它看起来是这样的：

每一页将有：

<div id="navigation"></div>

你可以有一个共享的JavaScript文件如下（假设所有页面都在同一级别的导航页）：

jQuery(document).ready(function() { 
    jQuery.ajax({ 
     url: "nav.html" 
     ,dataType: "html" 
    }).done(function(result) { 
     jQuery("#navigation").html(result); 
    }); 
});

来源

2015-04-03 21:35:05

为什么不只是$（'#navigation'）.load（url）'。 – Danijel 2015-04-03 21:38:32

@Danijel没有真正的理由 - 我个人几乎总是满'ajax'语法，所以我没有记住各种快捷方式或他们的签名，但简单的东西就是这样，你可能会更好。 – 2015-04-03 21:41:54

我最初创建这个项目的升级，从我的旧网站的原因之一是要加载速度更快，所以尽管它不会是一个明显的区别真的，我想我会避免阿贾克斯尽可能。但是，谢谢你的帮助。我想我只能在html中使用一个简单的链接标签，但我猜它比我想象的要困难。 – 2015-04-03 23:58:54

-1

我不是很清楚......但你可以叫你的菜单将被添加到任何网页从您的JavaScript文件是这样的：

function AddTheMenu(){ 
document.body.insertAdjacentHTML('afterEnd', 
'<a class="nav-link" href="reviews.html">Reviews</a>'+ 
'<a class="nav-link" href="trending">Trending</a>'+ 
'<a class="nav-link" href="contact">Contact</a>'+ 
'<a class="nav-link" href="about">About</a>'+ 
'<a class="nav-link" href="blog">Blog</a>'); 
}

因此需要包括该菜单的每个页面只是调用此：

AddTheMenu();

来源

2015-04-03 21:40:14 user4723924

哦，我明白了。那么你是说用这个函数创建一个JS文件，然后使用链接标签将它导入到每个html页面中，然后调用函数？这似乎是最简单的事情，感谢这个想法！正确！ – 2015-04-04 00:00:29

我用我们的网页应用程序页面填充了大量对所有人都通用的元素，这样就像魅力一样。 – user4723924 2015-04-04 01:19:59

您是否注意到在使用此方法或不使用此方法时存在任何滞后性，因为它仍位于网站本身内而不像ajax？ – 2015-04-04 05:46:27

导入HTML代码插入其他的文件

回答

相关问题