URL + Anker funktioniert nicht mit Element geladen aus Datei mit jQuery

Unten ist eine Seite, die zwei div s mit IDs 'foo' und 'bar' dynamisch angehängt. Problem ist, dass mit Chrome (v50.0.2661.102) Browser kann ich nicht Seite Sprung zu einem "bar" div, die von Datei geladen wird, indem Sie #bar an die URL (www.foo.bar/main.html#bar) anhängen, aber ich kann dies tun für ' foo '(www.foo.bar/main.html#foo) div, die deutlich an body angefügt wurde. Es sieht so aus, als ob die Funktion .load() asynchron ist. Ich habe kein solches Problem in Firefox oder IE. Gibt es eine Möglichkeit, dieses Problem zu umgehen?URL + Anker funktioniert nicht mit Element geladen aus Datei mit 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:

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

Quelle

2016-05-24 alex

In Ihrem Chrome-Konsole Sie wahrscheinlich so etwas wie sehen:

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

Dies ist auf Kreuz Ursprungsbeschränkungen in Chrome Versuchen Sie, Ihre Dateien auf einen Server hochzuladen und dort mit Chrome zu überprüfen.

Überprüfen Sie auch this answer, wenn Sie es manuell deaktivieren möchten.

Oder this plugin für mehr Optionen und einfache Verwendung.

Quelle

2016-05-24 09:42:38 jakob

Sorry für die nicht klar zu machen, lege ich meine Dateien auf einen Webserver. Das Problem bezieht sich nicht auf Cross-Origin-Anfragen. – alex

das ist seltsam .. weil es für mich funktioniert .. überprüfen Sie hier http://w3adventures.com/download/SO_37409658/ – jakob

Sie haben Recht, es tut. Ich war von Chrome Verhalten verwirrt - wenn Sie zum ersten Mal zum Anker kommen und nach oben scrollen, dann drücken Sie die Eingabetaste in der Adressleiste, der Browser springt nicht zum Anker. Es sieht so aus, als würde die URL nicht geändert, der Browser würde nicht zurückspringen. Vielen Dank. – alex

überprüfen Sie diesen Code, wenn es in Sie passt. Sie können neu angehängten div blättern (jedes Element)

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

Quelle

2016-05-24 09:54:49

URL + Anker funktioniert nicht mit Element geladen aus Datei mit jQuery

Antwort

Verwandte Themen