JavaScript: заменить элемент содержимым из другого HTML

Я хотел бы решить следующую проблему: Имея ссылку на веб-странице, я хотел бы заменить содержимое указанного элемента div содержимым элемента div другой страницы. Скажем, просто загрузите текст «Встать на плечи гигантов» со страницы Google Scholar в мой существующий элемент div.

Актуально, если реализован следующий пример:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href="http://www.whatsmyip.org/">Click me</a>

<div id="myid">Text to be replaced</div>

<script type="text/javascript">
    $("a").click(function() {
      $.get(this.href, function(data) {
        $("#myid").replaceWith($(data).find("#fb-root"));
      });
      previous_page = location.href;
      window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
      return false;
    });

    window.onpopstate = function(event) {
      location.reload();
    }
</script>

</body>
</html>

Я включил window.history, чтобы изменить URL-адрес в адресной строке и позволить пользователю восстановить предыдущее состояние веб-страницы без нового содержимого.

Теперь у меня две проблемы:

  • Замена элемента <code>div</code> похоже не работает, так как загружается вся страница из WhatIsMyIP.
  • При использовании Chrome вся страница перезагружается снова и снова с самого начала. Я думаю, что событие window.onpopstate срабатывает постоянно.

Спасибо за любую помощь!


javascript jquery replace pushstate
person labrassbandito    schedule 16.12.2011    source источник
comment
Возможно, ваша проблема с pushState может быть решена с помощью плагина, упомянутого в этом ответе: stackoverflow.com/questions/5210034/history -pushstate   -  person Kees C. Bakker    schedule 16.12.2011
comment
Я думаю, что одним из источников проблемы в вашей реализации является то, что $.get может занять слишком много времени для отмены события. Таким образом, возврат false может прийти слишком поздно. Кто-нибудь такое видел?   -  person jehon    schedule 01.08.2017

Ответы (4)


arrow_upward
2
arrow_downward

Вы можете комбинировать click и $.load в гиперссылке:

$('a').click(function(e){
    $('#myid').load($(this).attr('href'));
    e.preventDefault(); //needed to prevent navigation!
});

Если вам нужен специальный элемент на странице, вы можете добавить любой селектор. Пример:

 $('#myid').load($(this).attr('href') + ' div');

Это добавит все div запрошенной страницы.

person Kees C. Bakker    schedule 16.12.2011

arrow_upward
2
arrow_downward

По поводу вашего первого вопроса

Попробуй это

$('#myid').load(this.href + ' #fb-root');

вместо этого

$.get(this.href, function(data) {
    $("#myid").replaceWith($(data).find("#fb-root"));
});
person devnull69    schedule 16.12.2011

arrow_upward
1
arrow_downward

Попробуйте добавить event.preventDefault() перед return false;

person ijse    schedule 16.12.2011

arrow_upward
0
arrow_downward

Если я вас правильно понял, вы просто хотите заменить содержимое указанного элемента div на странице 1 (в данном случае элемент div с идентификатором "myid") содержимым элемента div со страницы 2 (страница 2 http://www.whatsmyip.org/).

Надеюсь, это может помочь:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href="http://www.whatsmyip.org/">Click me</a>

<div id="myid">Text to be replaced</div>

<script type="text/javascript">
$("a").click(function() {
  $.get(this.href, function(data) {
    var target_element_id_page2 = "element_id_page2";
    var target_element_type_page2 = "div";
    var respond= $('<div>' + data + '</div>');//You forgot this... It won't work unless you use it...
    var target_element = respond.find( target_element_type_page2 + '#'+ target_element_id_page2 )[0]; //There "might" be more div elements with the same id: that's why you specify index
    var container = document.getElementById( "myid");
    container.innerHTML = target_element.innerText;
    }, "html");
</script>

</body>
</html>

Я удалил window.history.pushState и window.onpopstate, чтобы лучше ответить на ваш вопрос без каких-либо ошибок, которые могут дать эти два кода. Если вы вернете их обратно, все должно работать идеально. Хотя я не понимаю, почему вы используете «previous_page = location.href;». предыдущая_страница не объявлена, и впоследствии вы ее не используете. Поправьте меня, если я ошибаюсь...

person chippie3000    schedule 30.03.2015