Question

我有一个问题，我正在使用html，css和javascript开发我的第一个产品组合。这是一个简单的网站，带有带有导航菜单的标题和带有一些信息的正文，我想知道是否有一个除iframe之外，每次单击链接时都仅加载正文而不影响标题的方法：

<header>
 <nav>
  Home, about me, etc
 </nav>
</header>
<body>
  this is my home page
</body>

Answer 1

使用Angularjs之类的库真正进入一页应用程序开发确实可以解决问题。如果您只需要非常简单的内容，则可以使用jQuery load函数。例如：

<body>
<button id="home">Home</button>
<button id="about">About</button>
<button id="examples">Examples</button>
<div id="content">
  this is my home page
</div>
</body>

<script language="Javascript">
$("#home").click(function() {
    $( "#content" ).load( "home.html" ); //Load all retrieved content
});
$("#about").click(function() {
    //Only load content from a specific node
    $( "#content" ).load( "about.html #desc" );
});
$("#examples").click(function() {
    //More specific loading of node
    $( "#content" ).load( "examples.html #storeMain .container" );
});



</script>

Answer 2

您可以动态加载页面并将其注入到主页（单页）。

作为另一种选择（部分不是您想要的），您可以通过url加载不同的页面，然后动态呈现onheader / footer加载（多页）。但是，多个页面将使您避免通过domain.com?page=about之类的东西来手动操作URL状态，并且从常规的网站开发角度来看，它通常更易于管理。

如果将其设为单页，则会通过ajax加载正文内容。像这样

<div class="header">Lorem ipsum</div>

<div class="content-wrapper">
  <!--Load content HTML here via ajax -->
</div>

<div class="footer">Lorem ipsum</div>

对于多页设置，我这样做

<div class="header-wrapper">
  <!--Load header HTML here via ajax or render them via a javascript component -->
</div>

<div class="content-wrapper">Lorem ipsum</div>

<div class="footer-wrapper">
  <!--Load footer HTML here via ajax or render them via a javascript component -->
</div>

ajax部分就是这样简单。（使用jQuery ajax，axios或http）

$.ajax({
  type : 'GET',
  url : 'foo.html',
  dataType : 'html',
  success : function(data){
     wrapper.innerHTML = data;
  },

查找通过Ajax动态加载html的信息，这样您就不必不断重复在页面上实现相同的页眉/页脚。或者，就像我说的那样，您也可以制作/采用一个UI组件来为您做而不用ajax。

Answer 3

这是使我开始学习编程的同一问题。

就动态加载动态内容而言，事情已经变得好多了……但就设置/构建工具/ JS框架等而言，要复杂得多。

人们会说---只使用HTML或PHP /，并且重新加载整个页面和重新绘制标题都没有关系...但是那些人并不喜欢您。如果您想看一下正在听一首歌（myspace）的乐队的图片...-或者您想要标题淡入另一背景并制作动画...

这是一个PHP示例，说明了所有内容：https://css-tricks.com/dynamic-page-replacing-content

这是一种骇人听闻的JS方式，它/所有信息都在一页上...但是被隐藏，然后与JS一起显示/，但是-URL不会改变：{ {3}}

// build a reusable function that switches the "view"
var switchView = function(trigger) {
  $('.view').addClass('hidden');
  var currentSection;
  currentSection = $(trigger).data('view');
  $('.' + currentSection).removeClass('hidden');
  console.log("you are currently on:" + currentSection);
};

// when you click the menu item... run that function to switch to the associated "view" based on it's data attribute
$('.view-controls a').on('click', function() {
  switchView(this);
});

$('.header').on('click', function() {
    $('.compact-menu').toggleClass('active');   
});

$('.compact-menu a').on('click', function() {
    $('.compact-menu').removeClass('active');   
}); // I had to add this code just to post a codepen link : /

实际示例：https://codepen.io/sheriffderek/pen/zxmjgr

不太理想...但是，如果您无论如何都不会更改URL ...对于SEO来说，这实际上更好-而且很容易-并为您提供了活泼的样式。

这是一种JavaScript框架方式：http://bryanleebrowncomposer.com

我喜欢Ember.js-但是，如果您要尝试使用其他框架-我会看看这种 vue.js方式：https://www.codementor.io/sheriffderek/less-than-ambitious-websites-with-ember-js-5mtthoijp

在大多数情况下，所有道路都会导致痛苦和折磨。祝好运！发表结果，是吗？

加载不同的页面，同时保留相同的标题

3 个答案: