JavaScript：用另一个 HTML 的内容替换元素答案

【问题标题】：JavaScript: Replace element with content from another HTMLJavaScript：用另一个 HTML 的内容替换元素
【发布时间】：2011-12-16 11:00:15
【问题描述】：

我想解决以下问题：给定网页上的链接，我想用另一个页面的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 事件是连续触发的。

感谢您的帮助！

【问题讨论】：

也许你的pushState问题可以通过使用这个答案中提到的插件来解决：stackoverflow.com/questions/5210034/history-pushstate
我认为您的实施中的问题来源之一是“$.get”可能需要太多时间才能取消事件。因此，“return false”可能来得太晚了。有人看过吗？

标签： javascript jquery replace pushstate

【解决方案1】：

您可以在超链接上组合 click 和 $.load：

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

如果您想要页面中的特殊元素，您可以附加任何选择器。示例：

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

这将附加所请求页面的所有 div。

【讨论】：

【解决方案2】：

关于你的第一个问题

试试这个

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

而不是这个

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

【讨论】：

【解决方案3】：

尝试在return false;之前添加event.preventDefault()

【讨论】：

【解决方案4】：

如果我理解正确，您只想用 page2 中的 div 元素的内容（page2 是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 未声明，之后您不再使用它。如果我错了，请纠正我...

【讨论】：