1

次の問題を解決したいと思います: Web ページ上のリンクが与えられた場合、指定され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 を変更し、ユーザーが新しいコンテンツなしで Web ページの以前の状態を復元できるようにするために、これを含めました。

今、私は2つの問題があります：

  • <code>div</code>WhatIsMyIP のページ全体が読み込まれるため、要素の置換は機能していないようです。
  • Chrome を使用している間、ページ全体が最初から何度もリロードされます。window.onpopstateイベントは継続的にトリガーされると思います。

助けてくれてありがとう！

4

4 に答える 4

2

最初の問題について

これを試して

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

これの代わりに

$.get(this.href, function(data) {
    $("#myid").replaceWith($(data).find("#fb-root"));
});
于 2011-12-16T11:03:59.317 に答える
2

ハイパーリンクでaclickと aを組み合わせることができます。$.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-16T11:04:36.530 に答える
1

event.preventDefault()前に追加してみるreturn false;

于 2011-12-16T11:07:15.980 に答える
0

私の理解が正しければ、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 を取り出して、これら 2 つのコードでエラーが発生することなく質問に答えられるようにしました。これらを元に戻すと、完全に機能するはずです。「 previous_page = location.href; 」を使用している理由はわかりませんが。previous_page は宣言されておらず、後で使用していません。間違っていたら訂正...

于 2015-03-30T06:15:38.237 に答える