URL +アンカーは、jQueryを使用してファイルから読み込まれた要素では機能しません。

以下はのページで、2つのdivにID「foo」と「bar」を動的に追加しています。問題は、Chrome（v50.0.2661.102）ブラウザを使用しているため、ファイルからロードされた「バー」divにページをジャンプさせることができず、URLに#barを追加することで問題になりましたが（「www.foo.bar/main.html#bar」） foo '（www.foo.bar/main.html#foo）divであり、これはbodyに明示的に付けられています。それはの機能が非同期であることによると思われる。私はFirefoxやIEでそのような問題はありません。この問題を回避する方法はありますか？URL +アンカーは、jQueryを使用してファイルから読み込まれた要素では機能しません。

main.htmlと：

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script> 
$(function() { 
    $("<div>").load("bar.html #bar", function() { 
     $('body').append($(this).html()); 
    }); 

    $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 
}); 
     </script>  
    </head> 
    <body> 
     <div style="height:150%; background-color:#FF8;">Lorem ipsum</div> 
    </body> 
</html>

は内容でbar.html：これはクロスによるものである

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

：あなたは、おそらくのようなものを参照してくださいChromeのコンソールで

<div id='bar' style="background-color:#88F;">BAR</div>

出典

2016-05-24 alex

Chromeの原点の制限。一部のサーバーにファイルをアップロードし、Chromeで確認してください。

手動で無効にする場合は、this answerもチェックしてください。

またはthis pluginもっとオプションと簡単な使い方については、

出典

2016-05-24 09:42:38 jakob

にスクロールすることができます。問題は、クロスオリジン要求とは関係ありません。 – alex

それは異常です..私のために働くのでここにチェックhttp://w3adventures.com/download/SO_37409658/ – jakob

あなたはそうです。 Chromeの動作が混乱していました。アンカーに初めてアクセスしてスクロールしてからアドレスバーにあるEnterキーを押すと、ブラウザはアンカーにジャンプしません。 URLがブラウザを変更しない場合、戻ってジャンプしないように見えます。ありがとう。 – alex

あなたが必要とする場合は、このコードをチェックしてください。あなたは、私は、Webサーバーに自分のファイルを置く、それは明らかにしていないため、新たに追加さDIV（任意の要素）申し訳ありません

$(function() { 
 
\t $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 
 
\t var new_html = '<div id="bar" style="background-color:#88F;">BAR</div>' 
 
    $('body').append(new_html); 
 
    
 
    // scroll to new element 
 
\t $('body, html').animate({ scrollTop: $("#bar").offset().top }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div style="height:500px; background-color:#FF8;">Lorem ipsum</div>

出典

2016-05-24 09:54:49

URL +アンカーは、jQueryを使用してファイルから読み込まれた要素では機能しません。

答えて

関連する問題