jQuery Mobile : Reloading/Deep Linking/Breaking When AJAX를 통해 DOM에 추가 된 페이지

jQuery Mobile을 사용하여 모바일 사이트를 구축하고 있으며 내 테스터 중 한 명이 다시로드, 딥 링크 또는 jQuery Mobile에 내장 된 표준 페이지 로딩 기능을 사용하여 DOM에로드 한 모든 페이지를 북마크에 추가 할 수 있습니다. 문서, 포럼 게시글, github 버그 목록 등을 검토 중이며 솔루션을 찾고 있습니다. 내가 잘못하고있는 일을 끝내고 있습니다. 필자가 본 것을 보여주는 매우 기본적인 두 페이지 예제를 작성했습니다.jQuery Mobile : Reloading/Deep Linking/Breaking When AJAX를 통해 DOM에 추가 된 페이지

는 첫째, 내 예를 들어 사이트의 루트 폴더에 index.html 페이지를 가지고있다 (즉, /index.html)를 다음과 같이 보이 : 나는 '라는 폴더에 두 번째 페이지를 가지고

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home Page</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> 
</head> 
<body> 
<!-- main page --> 
<div data-role="page" data-theme="b" id="main"> 
    <div data-role="header" data-theme="b"> 
     <h1>Home Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true"> 
     <li><a href="news/">News</a></li> 
     </ul> 
    </div><!-- /content --> 
</div><!-- /main page --> 
</body> 
</html>

이처럼 보이는 뉴스 '(즉 /news/index.html는) :

<div data-role="page" data-theme="b" data-add-back-btn="true" id="news"> 
    <div data-role="header" data-theme="b"> 
     <h1>News</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     TODO: page content goes here 
    </div><!-- /content --> 
</div><!-- /#news page -->

그래서,이 위대한 작품. "홈 페이지"가 정상적으로로드됩니다. 브라우저 주소 입력란은 http://m.example.com/입니다.

'뉴스'링크를 클릭하여 해당 페이지를 DOM에로드 할 수 있습니다. 브라우저 주소 필드에 http://m.example.com/news/이 표시됩니다. 이것은 내 문제가있는 곳입니다. 브라우저 다시로드 버튼을 클릭하면 /news/index.html 페이지가 다시로드되지만 기본 홈페이지 컨텍스트가 완전히 없어져서 jQuery, CSS 또는 적절한 HTML 문서 구조가 없습니다. 그 URL과 그 문서의 내용이 주어지기를 기대합니다. 하지만 내 모바일 사이트 외부에서 딥 링크 될 때 작동하려면 하위 페이지에 대한 링크가 필요합니다.

http://m.example.com/#news/을 사용하여 서브 페이지에 연결하면 서브 페이지가 올바르게로드되고 브라우저 주소 필드가 http://m.example.com/news/으로 자동 재 작성되어 작동합니다. 이 문제는 사람들이 즐겨 찾기, 짹짹, 이메일 등 페이지 URL을 수정할 때마다 수동으로 URL을 편집해야한다는 것을 알 필요가 있다는 것입니다.

자동으로 브라우저를 다시 홈 페이지로 이동시킨 다음 DOM 페이지가 올바르게 다시 만들어 지도록 사용자에게 보이지 않는 서브 페이지로드를 트리거하는 방법이 있습니까? 내가 뭘 놓치고 있니?

출처

2012-02-02 Brandon

나는 새로운 요청에 대한 내 사이트 템플릿의 콘텐츠를 렌더링할지 아약스의 요청에 대한 콘텐츠만을 렌더링할지 결정하기 위해 일부 서버 측 처리를 사용하는 비슷한 상황이 있습니다.

기본적으로 게시물을 추가하거나 'ajax 요청에'partial '변수를 가져오고 템플릿을 포함할지 여부를 결정합니다.

당신은 내가 생각할 수있는 유일한 방법은 모든 페이지에이 같은 것을 추가하는 것입니다 (IMO을 할 수있는 이상적인 방법입니다) 모든 서버 쪽 일을하지 않으려는 경우 :

if(window.firstload === undefined) 
{ 
    // Add script tags and stylesheets to the page and potentially load 
    // your site template into the DOM 

    window.firstload = true; 
}

가

첫 번째 페이지가 변수를로드 할 때 window.firstload 변수는 정의되지 않으므로 모든 스크립트 태그와 스타일 시트를 페이지에 추가 할 수 있습니다. 그런 다음 ajax window.firstload를 통한 후속 페이지로드가 true로 설정되어 다시 발생하지 않습니다.

출처

2012-02-02 02:59:33

감사합니다. Kane! 이것은 큰 도움이되었습니다. – Brandon

좋아, Kane의 제안에 따라 필자는 샘플 코드를 수정하여 현재 원하는대로 작동하는 것 같습니다.

예제 사이트 루트 폴더의 index.html 페이지 (예 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home Page</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> 
    <script type="text/javascript"> 
if(window.firstload === undefined) { 
    window.firstload = true; 
} 
    </script> 
</head> 
<body> 
<!-- main page --> 
<div data-role="page" data-theme="b" id="main"> 
    <div data-role="header" data-theme="b"> 
     <h1>Home Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true"> 
     <li><a href="news/">News</a></li> 
     </ul> 
    </div><!-- /content --> 
</div><!-- /main page --> 
</body> 
</html>

그리고 '뉴스'라는 폴더에 내 두 번째 페이지 (즉, /news/index.html)는 이제 다음과 같습니다 : /index.html)는 이제 다음과 같습니다

<script type="text/javascript"> 
if(window.firstload === undefined) { 
    for(var i=0, c=0; i < window.location.href.length; i++){ 
     if(window.location.href.charAt(i) == '/') { 
     c++; 
     if(c==3) window.location = window.location.href.substr(0,i) 
            + '/#' 
            + window.location.href.substr(i); 
     } 
    } 
} 
</script> 
<div data-role="page" data-theme="b" data-add-back-btn="false" id="news"> 
    <div data-role="header" data-theme="b"> 
     <a href="#main" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse"></a> 
     <h1>News</h1> 
     <a href="#main" data-icon="home" data-role="button" data-iconpos="notext" data-transition="fade">Home</a> 
    </div><!-- /header --> 
    <div data-role="content"> 
     TODO: page content goes here 
    </div><!-- /content --> 
</div><!-- /#news page -->

때리는 다시로드하거나 딥 링크/북마크, 이제 서브 페이지에서 방문자가 메인 페이지까지 반송 된 다음 서브 페이지에 제대로로드됩니다. 서브 페이지에서 리디렉션은 http://m.example.com/#/news/으로 생성됩니다.

이 정보가 키보드에서 머리를 두드리는 데 몇 시간을 절약 할 수 있기를 바랍니다.

출처

2012-02-02 21:36:32 Brandon

이 솔루션을 이용해 주셔서 감사합니다. 내가 조금 단순화 있도록 나에게 약간의 오차가 제공되었고, 지금은 나를 위해 작동하는 것 같군 :이 문제가 발생하는 다른 사람을 도움이

/** 
* fixes the problem where a subpage in jquerymobile will lose its back button after a refresh. Instead a refresh takes you back to the top page 
* http://stackoverflow.com/questions/9106298/jquery-mobile-breaks-when-reloading-deep-linking-bookmarking-pages-added-to 
*/ 
if(window.firstload === undefined && /#.+$/.test(window.location.href)) { 
    window.location = window.location.href.replace(/#.+$/, ''); 
}

희망을.

안부

윌 페레

출처

2012-12-06 23:15:45

가장 쉬운 방법은 메인 페이지로 리디렉션하는 것입니다 예 subapge : login.htm

<script type="text/javascript"> 
    window.location="index.htm"; 
</script> 

<div data-role="page" id='login'> 
    Ur sub page 
</div><!-- /page -->

JS 코드 만 해고 될

때 data-role = "page" 코드가 ajax를 통해 삽입되기 때문에 페이지가 다시로드됩니다.

출처

2012-12-29 11:22:03 slaver113

jQuery Mobile : Reloading/Deep Linking/Breaking When AJAX를 통해 DOM에 추가 된 페이지

답변

관련 문제