jQuery / iframe не работает в Chrome - PullRequest
Новая
       11

jQuery / iframe не работает в Chrome

15 голосов
/ 23 июня 2010

Я создал фан-страницу Facebook здесь:

http://www.facebook.com/apps/application.php?id=120196931351044&v=app_120196931351044

Он включает в себя фреймы для вызова определенных страниц / галерей изображений, которые используют jquery. Все отлично работает во всех браузерах, кроме Chrome. В iframes в Chrome ничего не отображается, только пустой белый фон.

Я пытался использовать load событие вместо ready обработчика, но все равно не повезло.
Кто-нибудь был свидетелем подобной проблемы в chrome?

Ваша помощь будет принята с благодарностью.

Большие изображения в заголовке приходят через iframe, страницу с jquery.

Обновление:

Как показано в комментариях ниже, похоже, что он не работает даже в Safari.

Обновление 2

Похоже, что тот же код работает в chrome при запуске вне iframe, вот ссылка на рабочую страницу:

http://jsbin.com/esame4/4

Обновление 3:

Кажется, что эта проблема сохраняется в Chrome при использовании iframes, как можно увидеть здесь:

http://www.google.am/support/forum/p/Chrome/thread?tid=2c81c3e3fd99b388&hl=en
http://forums.sharethis.com/topic.php?id=2742

Ответы [ 6 ]

4 голосов
/ 13 ноября 2012

Решение на самом деле простое. Чтобы ваши элементы iframe хорошо отображались в Chrome при просмотре страницы / приложения Facebook, вам нужно вызывать контент или свойства с защищенного сервера.

Вы ДОЛЖНЫ убедиться, что все необходимые файлы и папки, такие как CSS, JS и файлы изображений, находятся в защищенной папке.

  1. Для этого вам нужен сертификат SSL для вашего домена.

  2. Измените условие файла htaccess и условия перезаписи мода, чтобы принудительно использовать SSL для всех или определенных папок, особенно когда вы используете переменные для вызова файлов. Если вы используете абсолютный URL-адрес, измените его на https.

Надеюсь, это поможет!

2 голосов
/ 03 июля 2010

Если проблема с document.ready не вызывается в iframe, потому что страница уже была загружена в этот момент, можно вместо этого поместить javascript, который вы хотите загрузить, внизу новой страницы вместо в document.ready, чтобы он загрузился после загрузки всего остального? Я сделал что-то похожее на некоторых страницах, например, поместил немного javascript вверху страницы, чтобы показать загрузочное изображение, и еще один фрагмент внизу, чтобы скрыть его, и т. Д ... 

<html>
    <head><script>function pop(){alert("Page Loaded");}</script></head>
    <body>Lorum ipsum...</body>
    <script>pop();</script>
</html>
2 голосов
/ 28 июня 2010

Несколько предложений, в основном связанных с настройками Javascript на странице gallery.php:

Мой первый инстинкт - сказать, что это ошибка (или даже предполагаемый ответ) в том, как Chrome / WebKit обрабатывает межсайтовый скриптинг и другие подобные потенциальные дыры в безопасности. Я знаю, что некоторые дыры в безопасности связаны с запуском скрипта внутри iframe (как указывает эта бывшая ошибка Chrome ).

Возможно, это связано с тем, что вы ссылаетесь на свой jquery.min.js со страницы ajax.googleapis.com, а не размещаете его в том же домене, что и ваша страница gallery.php. Попробуйте поместить копию jquery.min.js на свой сервер и создать ссылку на нее и посмотреть, поможет ли это.

Кроме того, попробуйте переместить тег <link> библиотеки jQuery внутрь тега <head>, так как это более подходящее место для него.

Вы также можете попробовать использовать библиотеку jQuery Innerfade для запуска вашего вращающегося баннера. Это очистит ваш скрипт и, кто знает, возможно, убедит браузер, что вы не пытаетесь использовать дыру в безопасности.

Если вы не можете переключиться на использование Innerfade, по крайней мере измените переменные JavaScript, чтобы они не назывались с помощью $ (например, измените переменную "$ curbox" на "curbox"). Это может также прояснить любую путаницу, которую браузер может иметь с вашим Javascript. По крайней мере, это хорошая практика, особенно при использовании jQuery.

1 голос
/ 02 июля 2010

Эй, sAc, я попробовал это на Chrome 5.0.375.86, и это сработало. Поскольку Safari и Chrome используют один и тот же веб-движок (webkit), они могут унаследовать одну и ту же проблему. Поскольку это проблема с JavaScript, и теперь Chrome использует JavaScript-движок Google V8 вместо JavaScriptCore (движок JavaScript по умолчанию из webkit), эта проблема, похоже, решена в последних версиях Chrome. Возможно, это может быть проблемой в JavaScriptCore - не отправлять события готовности или загрузки, поскольку DOM уже загружен в документ до того, как будет создан iframe. Временное решение может быть установлено флаг, чтобы проверить, был ли контент инициализирован. Поставьте таймер от пяти до десяти секунд с setTimeOut, чтобы проверить этот флаг. Если это не инициализировано, тогда вызовите это на обратном вызове setTimeOut. Поэтому, если safari не вызывает события load или ready, setTimeOut может сделать это за вас. Конечно, не помещайте это в свой слой jquery. Поместите его как чистый тег javascript в ваш HTML-код для загрузки в iFrame.

0 голосов
/ 05 января 2017

Причина не работает потому, что браузер пометил iframe как небезопасный. Чтобы это исправить, просто добавьте кодировку в заголовок страницы, которую вы хотите отобразить: 

< head ><br/>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/><br/>
< /head><br/>
0 голосов
/ 28 июня 2010

Проверьте заголовки ответа на странице, которую вы пытаетесь вставить в iframe. Вы ищете заголовок с именем x-frame-options .

Это новый параметр безопасности, который сообщает браузеру не загружать содержимое кадра. Многие веб-серверы добавят его по умолчанию.

Это то, что стоит проверить.

...