URL + привязка не работает с элементом, загруженным из файла, используя jQuery

Ниже приведена страница main.html, которая динамически добавляет два div с идентификаторами «foo» и «bar». Проблема заключается в том, что с помощью браузера Chrome (v50.0.2661.102) я не могу сделать переход страницы в «бар» div, который загружается из файла, добавив #bar в URL (www.foo.bar/main.html#bar), но я могу сделать это для ' foo '(www.foo.bar/main.html#foo) div, который был явно добавлен к body. Похоже, что функция .load() является асинхронной. У меня нет такой проблемы в 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:

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

источник

2016-05-24 alex

В консоли 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 для получения дополнительных возможностей и простоты использования.

источник

2016-05-24 09:42:38 jakob

Извините за не давая понять, я положил мои файлы на веб-сервер. Проблема не связана с запросами на перекрестный поиск. – alex

это странно .. потому что это работает для меня .. проверьте здесь http://w3adventures.com/download/SO_37409658/ – jakob

Вы правы, но это так. Меня смутило поведение Chrome - если вы впервые попали на якорь и прокручиваете вверх, а затем нажмите enter в адресной строке, браузер не перейдет к якорю. Похоже, если URL-адрес не изменится, браузер не будет отскакивать. Благодарю. – alex

проверьте этот код, если он подойдет вам. Вы можете прокручивать вновь добавленным 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

ответ

Смежные вопросы