JavaScript: Замените элемент контентом из другого HTML

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

До настоящего времени, если реализован следующий пример:

<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 запускается непрерывно.

Благодарим за помощь!

источник

2011-12-16 labrassbandito

Возможно, проблема с pushState может быть решена с помощью плагина, упомянутого в этом ответе: http: // stackoverflow.com/questions/5210034/history-pushstate –

Я думаю, что одним из источников проблемы в вашей реализации является то, что «$ .get» может занять слишком много времени для отмены события. Таким образом, «возврат ложных» может зайти слишком поздно. Кто-нибудь видел это? – jehon

Вы можете сочетающих click и $.load по гиперссылке:

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

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

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

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

источник

2011-12-16 11:04:36

Что касается вашего первого вопроса

Try этого

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

вместо этого

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

источник

2011-12-16 11:03:59 devnull69

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

источник

2011-12-16 11:07:15 ijse

Если я вас правильно понимаю, вы просто хотите заменить содержимое указанного элемента сНа на page1 (в этом случае сОн элементе с идентификатором «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;». previous_page не объявляется, и вы не используете его впоследствии. Исправьте меня, если я ошибаюсь ...

источник

2015-03-30 06:15:38 chippie3000

JavaScript: Замените элемент контентом из другого HTML

ответ

Смежные вопросы