Question

我创建了一个类似html页面的shell，它在链接点击时将其他页面加载到div中。我遇到的问题是重写网页而不重新加载页面。还要检查哈希事件以添加和重写它们。

首先是链接;

<a href = "myexample" onclick="menuPage(this);return false;" >
   //result www.mywebsite.com/myexample

function loadPage(){
  var tempURL = window.location.hash.substring(1);
  $(".nav li").removeClass("active");
  $("a[data-role="+tempURL+"]").parent().addClass('active');
  if(!tempURL){
    $('#pages').animate({opacity: '0.0'},function(){
      $("a[data-role='Home']").parent().addClass('active');
      $.get('Home/index.html', function(response){
        $('#pages').html(response);
        scrollOnTop();
        $('#pages').animate({opacity: '1.0'});
      })    
    });
  }else{

    $('#pages').animate({opacity: '0.0'},function(){   
      jQuery.post(tempURL, function(response){

        $('#pages').html(response);
        ga('send',{    // google 
          'hitType': 'pageview',
          'title': 'mywebsite',
          'location':'http://www.mywebsite.com/'+ tempURL,
          'page': '/'+ tempURL
        });    

        document.title = $(response).filter('title').text();
        scrollOnTop();
        $('#pages').animate({opacity: '1.0'});
        tempURL = "";
      })
    });
  }
}
$(window).on("hashchange", function () {
  loadPage();     
});
function menuPage(obj){

  menu =  "#" + obj.getAttribute("href");
  window.location = menu;
  return false; 
}

function scrollOnTop(){
  jQuery("html, body").scrollTop(0);    
}    
//The above works 100% expected:**

让我说点击链接或输入网址www.myexample.com/#item1这将带我到那个页面所有好但让我说我点击或输入www.myexample.com / item1没有哈希这将进入页面，但所有打破，因为有一个名为“item1”的文件夹，其中包含索引文件...

基本上我想在网址中添加哈希：一旦我添加.htaccess文件的任何内容：RewriteRule

 ^([A-Za-z0-9-]+)/?$ # [NC,NE,R=301]

或变体。

这只是搞砸了。

Answer 1

我发现有点难以理解你的代码在做什么。一个jsfiddle或同等的人可能会有帮助。

看起来loadpage仅在url哈希更改时执行？并且具有www.myexample.com/item1的href的锚点不会导致散列更改。

我猜你想将click事件绑定到你的主播，这样你就可以拦截点击并运行你自己的自定义代码（加载页面代码段而不刷新），而不是浏览器默认的请求url的行为（www。来自服务器的myexample.com/item1。

类似的东西：

$('a').click(function() {

    /* Your code here. E.g... */

    $('#pages').animate({opacity: '0.0'},function(){
        $("a[data-role='Home']").parent().addClass('active');
        $.get('Home/index.html', function(response){
            $('#pages').html(response);
            scrollOnTop();
            $('#pages').animate({opacity: '1.0'});
        })  
    });

    // Returning false prevents browser default behaviour
    // Some people don't like it - see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
    return false;

});

加载动态网站页面，不刷新页面

1 个答案: