创建并构建索引页面 [英] Creating and structuring the index page

问题描述

我有一个测试网站 www.lemonbrush.com 有两个菜单项主页和关于。

当我们点击关于菜单，关于页面是动态加载的，这很棒，但当我直接输入关于页面的网址 http://www.lemonbrush.com /about.html 到地址栏中，我的整个计划都是六个月。

我需要一些指导来说明如何构造和加载即使我们在地址栏中使用直接URL，也可以包含整个标题和导航。

我的技能是HTML和Javascript。

请看下面的截图。

< img src =https://i.stack.imgur.com/yg9Vq.pngalt =在这里输入图片描述>

解决方案

所以，既然我认为这对我的项目很好，有了可用的浏览器历史记录和可收藏的子页面，我昨天尝试了我对OP的评论。

第1步：将导航栏中的锚点更改为类似的内容：

 < a href =＃index> home< / a> 
< a href =＃about> about< / a> 
  

要说的是，他们不需要在同一个父元素内。这些链接可以在任何地方。

步骤2：从脚本中删除点击处理程序，这反应在导航栏上点击！

第3步：创建一个函数，以监听onhashchange事件。 （这必须在主html页面上完成一次）

  //为onhashchange事件创建一个函数
 window.onhashchange = function（）
 {
 //检查是否使用位置散列
 if（window.location.hash！= null）
 {
 //将当前位置散列存储在变量中
 requestedPage = location.hash; 
 //从位置散列值中删除'＃'
 requestedPage = requestedPage.replace（'＃'，''）; 
 
 //将内容从子页面加载到内容框架中
 $（'＃contentFrame'）。load（'./'+ requestedPage +'.html'，function（response，status， xhr）
 {
 // catch'文件未找到'错误并加载启动页面
 if（status ==error）{
 $（'＃mainPanel'）。 load（'./ start.html'）; 
} 
}）; 
}; 
  

对于您的页面，您当然可以调整，使用正确的选择器和正确的文件名。

然后，您将通过www.mydomain.com致电您的页面，并通过www.mydomain.com/#subPage为每个子域名打电话。

I have a test website www.lemonbrush.com is has the two menu items "Home" and "About".

When we click on the "About" menu, the About page is loaded dynamical, which is great, but when I type the About page's url directly http://www.lemonbrush.com/about.html into the address bar, my whole plan goes for six.

I need some guidance in how shall I structure and load the pages so that the whole header and navigation are included even when we use the direct URL in the address bar.

My skills are HTML and Javascript.

Please see the following screen shots.

解决方案

so, since i thought it would be nice for my project, to have a usable browser history and bookmarkable subpages, i yesterday tried the approach from my comments of the OP.

step 1: change the anchors in your navigation bar to something like that:

<a href="#index">home</a>
<a href="#about">about</a>

needles to say, that they don't need to be inside the same parent element. those links could be anywhere.

step 2: remove the on click handler from your script, that reacts on the navigation bar clicks!

step 3: create a function, to listen to the onhashchange event. (this has to be done once, on the main html page)

//create a function for the onhashchange event
window.onhashchange = function()
{
    //check if a location hash is used
    if(window.location.hash != null) 
    { 
        //store current location hash in a variable
        requestedPage = location.hash;
        //remove the '#' from the location hash value
        requestedPage = requestedPage.replace('#','');

        //load content from subpage into your content frame
        $('#contentFrame').load('./' + requestedPage + '.html', function( response, status, xhr ) 
        {
            //catch 'file not found' errors and load start page
            if ( status == "error" ) {
                $('#mainPanel').load('./start.html');
            }
        });
};

for your page, you have of course to adapt, use the correct selectors and the correct file names.

you then would call your page via www.mydomain.com, and every subdomain via www.mydomain.com/#subPage

这篇关于创建并构建索引页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！