요소를 새로 고치지 않은 상태로 유지하는 방법

요소를 새로 고치지 않은 상태로 유지하는 방법

는 새로 되지 않은 Logotext를 유지하는 입니다.<div class="small-7 medium-4 columns logo"> and menu menu and and 。<nav class="pagedMenu" role="navigation">페이지 새로 고침 시 또는 콘텐츠를 페이지에서 다른 페이지로 로드하는 동안 클리핑하지 않습니다.또한 페이지 간에 메뉴 상태를 유지해야 합니다.

문제를 해결할 수 있는 솔루션을 찾았습니다(ajax를 사용하여 업데이트된 콘텐츠를 가져오고 jQuery를 사용하여 새 콘텐츠를 페이지에 배치하여 새로 고치지 않아도 됩니다). 이렇게 하면 페이지 내의 기존 데이터는 그대로 유지됩니다.@jfriend00 )

그래서 AJAX 플러그인(AWS)을 사용해 보았습니다.AWS 옵션 페이지에서 다음 항목을 가리키는 올바른 작업을 수행했다고 가정합니다.wrapperAjax 컨테이너 ID로 지정됩니다.pagedMenu메뉴 컨테이너 클래스로, Transition Effect Enabled, 빈 Ajax 컨테이너 ID 없음, 선택된 로더 없음, 테마에 펄스 로더가 이미 구현되어 있습니다.

이 시점에서 얻을 수 있는 것은 메뉴/사이드 메뉴(shiftnav)/펄스 닷로더/콘텐츠 로딩 오작동뿐입니다.아마 잘못 정의된 Ajax 컨테이너 ID 및/또는 메뉴 컨테이너 클래스(?)에 의해 생성되거나 기존 컨테이너와의 충돌에 의해 생성되었을 것입니다.JSjQuery암호는 잘 모르겠어요

Chrome 콘솔에서도 다음 오류가 발생합니다.

Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4

페이지 리프레시에서는 모든 것이 정상으로 돌아오고 있습니다만, 전혀 도움이 되지 않습니다.

와 jQuery-Storage-API를 사용하여 storage=jQuery.sessionStorage;mynewmenu.displays 파일에서 볼 수 있듯이, 이 파일을 사용해도 비동기 요소 문제는 해결되지 않습니다.

@Diego Betto 덕분에 메뉴도 jsfiddle만 가능합니다.

이 라이브 링크를 예로 들 수 있습니다.상기 Ajax 실장권(?)과 같은 상황이 있습니다.아피아란스는 페이지 간에 갱신되지 않은 상태로 유지됩니다.Books, Works 등 메뉴 섹션을 참조하면 여기에서 구현 가능한 모델이 있으면 기쁠 것 같습니다.

LE: 한편, 저는 @arvgta에 의해 만들어진 다른 ajaxify 솔루션을 시도했지만, 아직 성공하지 못했습니다만, 작성자가 알아낸 바로는 정의된 요소는 id의 클래스가 아닌 divs여야 합니다.그래서 수업시간에 아이디를 가질 수 있도록 어떻게든 코드를 수정하는 방법을 찾아볼게요.

「jaxify.min.js」로page-container 소 elementjQuery('#page-container').ajaxify();하다

LE2: 클래스가 아닌 id를 사용하여 솔루션을 구현하려고 했지만 페이지가 올바르게 로드되지 않습니다.

이 시점에서 다음 행으로 갱신된ajax.min.js 파일이 있습니다.

(function($){

  jQuery(document).ready(function(){
    jQuery('#page-container').ajaxify({requestDelay:400,forms:false});
  });

})(jQuery); 

마, 테, 테, 테, also, 테, 테, 테, also, also, also, also, also, also, also, also, also, also, also.id=page-container instead의 경우class=page-container.

이러한 상황에서는 메뉴 클릭 시 링크가 변경되고(필요한 대로), 메뉴/로고텍트 요소가 거의 정상적으로 동작하고 있는 것 같습니다(때로는 위치가 불안정해집니다). 그러나 모든 경우에서 콘텐츠가 올바르게 로드되지 않습니다. 마찬가지로 수동 페이지 새로 고침(f5)으로 모든 것이 정상으로 돌아오지만 도움이 되지 않습니다.

LE3: Revolution Slider 플러그인과 Ajaxify 사이에 충돌이 있는 것 같습니다.

=" Errorerrormessage="Revolution 슬슬 you you you : .";=" +="에 포함된 jquery가 포함되어 .
회전 라이브러리를 하지 않도록 "=">"make" "make" "make" "make" "make" "make" "make" "make" "make" "make" " span="

사이트 라이브 링크는 이쪽입니다.이 분야에 대한 생각이나 대안이 있습니까?(다른 플랫폼이나 WordPress 테마 등을 사용하는 것에는 관심이 없습니다.)

LE4: 제가 본 바로는 해결책이 될 수 있는 Jake Bown 답변에 투표한 사용자가 많습니다.하지만 제 테마에 올바르게 구현되지 않은 이유를 찾을 수 없습니다(오류 없이) 라이브 링크에서 logotext/메뉴 요소는 새로고침 시 여전히 희미해지고 있고 새로고침되지 않은 상태로 남아 있지 않습니다.제이크 바운 / 누구 생각 없어요?

LE 파이널Buzinas는 내 사이트 환경(플러그인 설치 등)을 고려하여 내 요구에 가장 가까운 답변을 제공했습니다.

말씀하신 대로라면 원하는 솔루션을 찾을 수 있을 것 같습니다.로고와 네비게이션은 손대지 않은 채 동적으로 콘텐츠를 로드하고 싶으십니까?그렇다면 이것이 당신이 찾고 있는 것일 수도 있습니다.

이 예에서는 페이지는 페이지 내의 div에서 로딩되지만 다른 URL 또는 파일을 로딩하는 데 사용할 수 있습니다.

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($('.'+link).length) {
     $('.viewport span.body').html($('.'+link).html());
   }
});

TL;DR

널 위해 플런커를 만들어 놨어, 보고, 네가 할 수 있는 한 오래 가지고 놀아라.많은 걸 배울 수 있을 거야!

---

여기서 너무 많은 것을 시도하고 있는 것 같습니다만, 가장 간단한 것은 시도하지 않았습니다.

주요 목표는 페이지 새로 고침 시 또는 콘텐츠를 페이지에서 다른 페이지로 로드하는 동안 클리핑하지 않고 로그 텍스트와 메뉴를 새로 고치지 않은 상태로 유지하는 것입니다.또한 페이지 간에 메뉴 상태를 유지해야 합니다.

필요한 경우는, 다음의 몇개의 순서가 있습니다.

• '마스터' '마스터' 페이지를 만들어요index.html제부부이
• 따라서 인덱스는 메뉴, 로고, 바닥글 등 페이지의 정적 부분을 포함해야 합니다.
• ('서브페이지'는 안 돼요).html,head,body,script,style태그, 마스터 페이지에 표시되는 콘텐츠만).

• 이것으로 완전히 새로 고치는 대신 AJAX를 사용하도록 링크를 변경해야 합니다.

  /* we add a 'click' event handler to our menu */
  document.getElementById('menu-menu-2').addEventListener('click', function(e) {
    var el = e.target;
  
    /* then, we see if the element that was clicked is a anchor */
    if (el.tagName === 'A') {
      /* we prevent the default functionality of the anchor (i.e redirect to the page) */
      e.preventDefault();
      /* we show our spinner, so the user can see that something is loading */
      spinner.classList.remove('hidden');
  
      /* and we call our AJAX function, passing a function as the callback */
      ajax(el.href, function(xhr) {
        /* we get our main div, and we replace its HTML to the response that came
           from the AJAX request */
        document.getElementById('main').innerHTML = xhr.responseText;
        /* since the request was finished, we hide our spinner again */
        spinner.classList.add('hidden');
      });
    }
  });
  

• 좋아요, 이제 우리 페이지는 이미 AJAX를 통해 작동되고 있고 정적 콘텐츠를 다시 로드하지 않습니다.

---

하지만 이제 우리는 몇 가지 문제가 있음을 알게 되었습니다.예를 들어, 누군가가 URL을 통해 당사 페이지 중 하나를 직접 열려고 하면 메뉴/로고 등을 사용하지 않은 페이지가 표시됩니다.그럼 어떻게 해야 하죠?

이제 몇 가지 단계가 더 있습니다.

• History API를 사용하여 링크가 페이지 간에 효율적으로 전송되는 것을 시뮬레이션합니다.

  /* inside our ajax callback, we save the fake-redirect we made into the pushState */
  ajax(el.href, function(xhr) {
    document.getElementById('main').innerHTML = xhr.responseText;
  
    /* save the new html, so when the user uses the back button, we can load it again */
    history.pushState({
      html: main.innerHTML,
      title: el.textContent + '| neuegrid'
    }, '', el.href);
  
    /* (...) */
  });
  
  /* and outside it, we add a 'popstate' event handler */
  window.addEventListener('popstate', function(e) {
    /* so, if we've saved the state before, we can restore it now */
    if (e.state) {
      document.getElementById('main').innerHTML = e.state.html;
      document.title = e.state.title;
    }
  });
  

• '다보다'라는 페이지가 합니다.about-us로 리다이렉트 합니다.index.html해 주세요.about-us이치노

• 해서 ''를 만들고redirect.js모든 서브페이지에서 참조할 수 있습니다.

  /* save the page that the user tried to load into the sessionStorage */
  sessionStorage.setItem('page', location.pathname);
  /* and them, we redirect him to our main page */
  location.replace('/');
  

• 그리고 우리 집에서index.html 페이지, 페이지, 페이지, 확인합니다.sessionStoragehome

  var page = sessionStorage.getItem('page') || 'home';
  /* we look into the menu items, and find which has an href attribute 
     ending with the page's URL we wanna load */
  document.querySelector('#menu-menu-2 > li > a[href$="' + page + '"').click();
  

이제 끝이야, 우린 끝났어내가 너에게 만들어 준 플런커를 봐.

그리고 가능한 한 오래 가지고 놀아라, 그러면 많은 것을 배울 수 있을 것이다.

도움이 됐으면 좋겠어! :)

---

:이 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.ajax★★★★

function ajax(url, callback, method, params) {
  if (!method) method = 'GET';

  var xhr = new XMLHttpRequest();
  xhr.open(method, url);

  if (callback) xhr.addEventListener('load', function() {
    callback.call(this, xhr);
  });

  if (params) {
    params = Object.keys(params).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&');
    xhr.send(params);
  } else {
    xhr.send();
  }
}

워드프레스로 아약스 가공된 이동

• 데모: http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/

(는과 같은 간단한 절차를 ."twentyfifteen"WP:

1. single.php,page.php,index.php에는 「」가 붙어 있습니다.get_header() ★★★★★★★★★★★★★★★★★」get_footer()각각 아래 코드로 대체한다.

메모: 다른 사람(예를 들어 검색 엔진)이 링크에서 직접 페이지에 접속해도 100% 사용할 수 있기 때문에 이것은 중요합니다.(SEO에 유용)

---

<?php 
//get_header()
if(!isset($_REQUEST['ajax'])){
  get_header();
}
?>

<!-- other code --->

<?php
//get_footer()
if(!isset($_REQUEST['ajax'])){
  get_footer();
}
?>

2. 을 열다header.php <head> 에 있는

---

    <script>
!(function($) {
    $(function() {
        $('.menu-item a, .widget-area a, .page_item a').on('click', function(e) {
            e.preventDefault();
            var href = this.href;
            var query = href ? (href + (!/\?/g.test(href) ? '?' : '&') + 'ajax=1') : window.location;

            /* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
            /* ex: kill instance of running plugins */

            $('#content').hide().empty().load(query, function() {

                /* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
                /* ex: refresh or run a new plugin instance for this page */

                jQuery(this).show();
            });
        });
    });
})(jQuery);
    </script>

3. header.phpfile은 파일 끝에 아래 코드를 입력합니다. 90%는 네비게이션 아래에 필요합니다., 「 」에 ."twentyfifteen"★★★★★★ 。

   NB: 아마 당신은 오프닝 태그를 가지고 있을 것입니다.<div id="content" class="site-content">내 the의 header.php 및 " " " " "</div> footer.php일,, 이이이이다 다다다다 그대로 두셔도 됩니다.

---

<div id="content"></div>

• 주의: 이것은 개념 실증이라고 생각됩니다.현재로서는 동작할 수 있지만, 요구에 맞추어 커스터마이즈 할 필요가 있습니다.또, 다음의 조작이 필요하게 되는 경우가 있습니다.

  1. 되어 있지 않은 ).Appeareace > Menus > [check Primary Menu] > Save Menu작동됩니다테스트도 되고 동작도 하고 있습니다.
  2. 에는 jQuery와 같은 다른 할 수 ..widget-area a위젯 링크도 추가해 주세요.
  3. 서드파티 플러그인을 사용하는 경우 각 플러그인의 모든 의존관계가 메인페이지에 로드되어 있는 것을 확인할 필요가 있습니다.이 페이지에서는 콘텐츠를 갱신하지 않고 모든 것을 표시할 수 있습니다.
  4. 새로운 페이지를 로드하기 전에 이러한 서드파티 플러그인을 체크하고 종료해야 할 수 있습니다.또, 로드된 페이지에 필요한 플러그 인을 실행 또는 갱신할 필요가 있습니다.

언급URL : https://stackoverflow.com/questions/32770490/how-to-keep-elements-non-refreshed