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

发布于 2024-12-21 10:50:39 字数 1216 浏览 1 评论 0原文

我想解决以下问题：给定网页上的链接，我想用 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，并允许用户恢复网页的先前状态，而无需新内容。

现在，我有两个问题：

div 元素的替换似乎不起作用，因为 WhatIsMyIP 的整个页面已加载。
使用 Chrome 时，整个页面会从头开始一次又一次地重新加载。我认为，事件 window.onpopstate 是连续触发的。

感谢您的帮助！

原文

I would like to solve the following problem: Given a link on a Web page, I would like to replace the content of a specified div element with the content of a div element of another page. Say, just load the text "Stand on the shoulders of giants" from the Google Scholar page into my existing div element.

Up to date, if implemented the following example:

<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>

I've included window.history in order to change the URL in the location bar, and to allow the user to restore the previous state of the Web page without the new content.

Now, I have two issues:

The replacement of the <code>div</code> element seems not to work, since the entire page from WhatIsMyIP is loaded.
While using Chrome, the entire page gets reloaded again and again right from the beginning. I think, the event window.onpopstate is triggered continuously.

Thank for any help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人事已非 2024-12-28 10:50:39

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

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

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

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

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

You could combine a click and a $.load on a hyperlink:

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

If you want a special element within the page, you can append any selector. Example:

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

This will append all divs of the requested page.

回复收藏 0 原文

橙幽之幻 2024-12-28 10:50:39

关于你的第一个问题

尝试这个

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

而不是这个

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

Regarding your first issue

Try this

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

instead of this

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

回复收藏 0 原文

雾里花 2024-12-28 10:50:39

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

回复收藏 0 原文

迷你仙 2024-12-28 10:50:39

如果我理解正确的话，您只想将 page1 上指定的 div 元素的内容（在本例中 ID 为“myid”的 div 元素）替换为 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 未声明，之后您不会使用它。如果我错了请纠正我...

If I understand you correctly, you just want to replace the content of a specified div element on page1 (in this case div element with ID "myid") with the content of a div element from page2 (page2 is http://www.whatsmyip.org/).

Hope this might help:

<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>

I took out window.history.pushState and window.onpopstate to better answer your question without any errors these two codes might give. If you put these back it should work perfectly. Althought I do not understand why you're using " previous_page = location.href; ". previous_page is not declared and you are not using it afterwards. Correct me if I am wrong...

回复收藏 0 原文

~没有更多了~