Question

下面是一个main.html页面，它动态地附加两个带有ids'foo'和'bar'的div个。问题是使用Chrome（v50.0.2661.102）浏览器我无法通过将#bar附加到网址（div）使页面跳转到从文件加载的“栏”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中的Cross origin限制。尝试在某些服务器上上传文件，然后使用Chrome进行检查。

如果您想手动禁用它，请另外检查this answer。

或this plugin了解更多选项和简单用法。

Answer 2

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

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

2 个答案: