Question

html代码

<div class="fakeSearch">
    <input id="searchInput" type="text" placeholder="Search">
    <img id="searchImg" class="clickAble" src="./img/search.png">
</div>

脚本

window.addEventListener("hashchange", ChangePage);

$('#searchImg').on('click', function(){
  var word = decodeURIComponent($('#searchInput').val());
  window.location.hash = '#search:'+word;
});

var ChangePage = function(){
  var myUrl = window.location.hash;
  var argStr = myUrl.split("\\");
  argStr = argStr[0].split(":");
  argStr[0] = argStr[0].replace("#", "");

  $('#mainPlace > div').css('display','none');

  if(myUrl === ""){}
  ...
  else if(argStr[0]==='search'){
    $('#searchPage').css('display','block');
    InitLoadSearch(decodeURIComponent(argStr[1]));
  }
}

var InitLoadSearch = function(){
   /* call ajax data and print masonry */
}

写作直接打字网址时的工作 #search：123
但是， window.location.hash =＆＃39; #search：＆＃39; + word 代码不起作用。
更正确，默认页面是砌体页面 *砌筑 - 我使用http://masonry.desandro.com/
搜索页面也是砌体页面默认页面的网格是中断。（位置重置），当搜索单击和后退按钮时单击
只打破 android mobile chrome
每个网格都是其他定义。

此外，

<a href="#search:code"></a>

是正常的工作！只有

window.location.hash = "#search:"+variable;

是休息。

总之，我知道差异写入网址，标记href 和 window.location.hash

Answer 1

不幸的是你很难理解。

我在小提琴中试过你的代码：https://jsfiddle.net/3ouLyxds/它似乎有效。我只改变了代码的顺序，或者它根本不起作用：

var ChangePage = function(){

  var myUrl = window.location.hash;
  var argStr = myUrl.split("\\");
  argStr = argStr[0].split(":");
  argStr[0] = argStr[0].replace("#", "");

  $('#mainPlace > div').css('display','none');

if(argStr[0]==='search'){
    $('#searchPage').css('display','block');
    InitLoadSearch(decodeURIComponent(argStr[1]));
  }
}

var InitLoadSearch = function(str){
   alert(str);
}

window.addEventListener("hashchange", ChangePage);

$('#searchImg').on('click', function(){
  var word = decodeURIComponent($('#searchInput').val());
  window.location.hash = '#search:'+word;
});

window.location.hash差异写入url和标记

1 个答案: