URL + 锚点不适用于使用 jQuery 从文件加载的元素

Question

下面是一个 main.html 页面，它动态地附加了两个 div，ID 为 'foo' 和 'bar'。问题是使用 Chrome (v50.0.2661.102) 浏览器我无法通过将 #bar 附加到 [= 来使页面跳转到从文件加载的 'bar' div 35=] ( www.foo.bar/main.html#bar )，但我可以为 'foo' ( www.foo.bar/main.html#foo ) div 这样做，它显然附加到 body。看起来这是由于 .load() 函数是异步的。我在 Firefox 或 IE 中没有这样的问题。有办法解决这个问题吗？

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>

Answer 1

在您的 Chrome 控制台中，您可能会看到如下内容：

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

这是由于 Chrome 中的跨源限制。尝试将您的文件上传到某些服务器并在那里使用 Chrome 进行检查。

如果您想手动禁用它，请勾选 this answer。

或this plugin以获得更多选项和简单用法。

Answer 2

检查此代码是否符合您的需要。您可以滚动到新添加的 div(任何元素)

$(function() {  
 $( 'body' ).append("<div id='foo' style='background-color:#8F8;'>FOO</div>");   
 var new_html = '<div id="bar" style="background-color:#88F;">BAR</div>'
    $('body').append(new_html);
    
    // scroll to new element
 $('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>

URL + 锚点不适用于使用 jQuery 从文件加载的元素

URL + anchor does not work with element loaded from file using jQuery

html

javascript

url

anchor

jquery