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

Question

Below is a main.html page which dynamically appends two divs with ids 'foo' and 'bar'. Problem is that using Chrome (v50.0.2661.102) browser I can not make page jump to a 'bar' div, which is loaded from file, by appending #bar to the URL ( www.foo.bar/main.html#bar ), but I can do so for 'foo' ( www.foo.bar/main.html#foo ) div, which was plainly appended to body. It looks that it is due to .load() function being asynchronous. I have no such problem in Firefox or IE. Is there a way to get around this issue?

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>

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

In your Chrome console you probably see something like:

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

This is due to Cross origin limitations in Chrome. Try to upload your files on some server and check it there with Chrome.

Also check this answer if you want to disable it manually.

Or this plugin for more options and simple usage.

edited May 23 '17 at 12:24

Community

1
1

answered May 24 '16 at 09:42

jakob

3,265
4
23
40

Sorry for not making it clear, I put my files to a web server. Issue is not related with cross origin requests. – alex May 24 '16 at 10:34
that's strange.. because it works for me.. check here http://w3adventures.com/download/SO_37409658/ – jakob May 24 '16 at 10:37
You are right it does. I was confused by Chrome behavior - if you get to the anchor first time and scroll up, then press enter in the address bar, browser doesn't jump to the anchor. It looks like if URL doesn't change browser would not jump back. Thanks. – alex May 24 '16 at 10:55
Closed this question and opened a new one which better better addresses the issue i get: http://stackoverflow.com/questions/37413184/css-anchor-link-to-dynamically-loaded-element-using-jquery-does-not-work – alex May 24 '16 at 13:29

score 0 · Answer 2 · answered May 24 '16 at 09:54

check this code, if it will fit into you needs. You can scroll to newly appended div(any element)

$(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 + anchor does not work with element loaded from file using jQuery

2 Answers2