Я использую симпатичную и простую dialog команду jQuery, чтобы открыть диалоговое окно перед каким-либо встроенным сторонним контентом. Этот встроенный контент может быть страницей с любого веб-сайта. Я могу заставить это работать на некоторых сайтах (Yahoo, Google), но я не могу заставить его работать на других сайтах (MSN, Johnlewis, FT).
Я удалил как можно больше из приведенного ниже кода, чтобы дать голой проблемы – код, как он отображается, отлично работает, и диалоговое окно действительно отображается. Но, закомментируйте линию YAHOO и раскомментируйте линию MSN, тогда диалог не будет отображаться!
<head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <style> .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; font-size: 20pt;} </style> <script> $(document).ready(function() { $( "#thedialog" ).dialog( "destroy" ); $( "#thedialog" ).dialog({height:400, width:600, modal: true, buttons: {Cancel: function() {$( this ).dialog( "close" );}} }); }); </script> </head> <body> <?php // WORKING - these pages DO launch a dialog: $targetlink = 'http://www.yahoo.com'; // $targetlink = 'http://www.bbc.co.uk'; // $targetlink = 'http://www.google.com'; // NOT WORKING - these pages do NOT launch a dialog: // $targetlink = 'http://www.msn.com'; // $targetlink = 'http://www.johnlewis.com'; // $targetlink = 'http://www.ft.com'; echo file_get_contents($targetlink); ?> <div id="thedialog" title="Simple dialog box" style="display:none">My girl lollipop</div> </body>
Единственное, что я могу думать, это должно быть что-то на одном из нерабочих веб-сайтов, которые противоречат моему коду. Я пробовал все, чтобы заманить ловушку в проблему, но не могу найти причину этого.
Кто-нибудь может мне помочь?
ПРИМЕЧАНИЯ: – (1) Я знаю, что пример, как показано, не нужен PHP, но более полная версия (я просто удалил большую часть кода PHP, чтобы этот пример был маленьким). – (2) Я использую JQuery в другом месте на странице в более полной версии, поэтому в идеале я хотел бы остаться с JQuery, вместо того, чтобы вводить альтернативную структуру / метод.
[edit] Видимо, он работает для некоторых людей. Я сам не могу заставить его работать без изменений ниже, хотя .. [edit]
Консоль Firebug полезна для отладки таких вещей. В этом случае я получил $ ('# thedialog'), это не сообщение об ошибке функции .
Я работал с jQuery noConflict:
<script> var $j = jQuery.noConflict(); $j(document).ready(function() { $j( "#thedialog" ).dialog( "destroy" ); $j( "#thedialog" ).dialog({height:400, width:600, modal: true, buttons: {Cancel: function() {$( this ).dialog( "close" );}} }); }); </script>
Я предполагаю, что что-то на этих страницах противоречит / переопределяет $, но это, кажется, работает нормально (проверено msn.com).
Посмотрите на эту страницу для получения дополнительной информации.
хотя я не смог воспроизвести проблему с моей стороны, ответ Терри Сейдлера действительно. Вы столкнетесь с столкновениями с сайтами, у которых уже есть диалоги и JQuery.
У вас есть 2 метода для атаки на эту проблему (я не думаю, что метод «no conflict» будет делать, поскольку вы также используете плагины пользовательского интерфейса)
проверьте, определено ли $ и определено ли $.dialog . Если он определен, используйте то, что имеет сайт, в противном случае используйте динамическую загрузку
используйте raw JS для добавления обработчика в onload для страницы / окна и запускайте функцию. В этой функции вы должны вставить код JQuery и JQuery-UI. Этот метод использует область действия функции, чтобы избежать проблем с пространством имен.
Чтобы сделать метод 2 более понятным, выполните следующие JS-коды
function printMe() { alert("this will print me"); } function printMeToo(){ function printMe(){ alert("this will print me too"); } printMe(); } printMeToo();
Этот код должен предупредить «это тоже напечатает меня» – и запуск printMe другом месте на странице будет предупреждать «это напечатает меня». Таким образом, вы не нанесете вреда на страницы, которые вы загружаете (что также следует учитывать), и они не будут влиять на вас.
Как это будет выглядеть? Чтобы посмотреть, как добавить обработчик onload raw JS, вы можете взглянуть на этот вопрос stackoverflow . скажем, что-то вроде document.addEventListener( 'onload', function () { ... /* important stuff */ });
Важно то, как эта функция будет выглядеть? Так что это ожидаемая структура
function(){ /* important stuff function */ // paste here JQuery definition code (copy paste into here... ) make sure to use the minified code! (function(a,b){function G(a) ... {return p})})(window); // paste other plugins code as well. dialog + ... .... // now your code should be here, exactly like you posted it untouched $("myelement"); // this uses MY JQuery version, and my JQuery-UI version and my plugins without the possibility of an override. The site cannot override my code, and I cannot override the site's code. } /* end of really important stuff function here */
Хотите, чтобы этот метод работал и работал? Я защищаю свой сайт с помощью Incapsula – и поэтому они показывают свою печать на моем сайте (вроде вашего диалога) – см. Плавающий div внизу справа? Они используют JQuery и другие вещи там, точно так же, как я указываю здесь.
BTW – относительно CSS – вы можете столкнуться с такими же проблемами. Например, вы ссылаетесь на класс .bottom – на других сайтах может быть собственный класс и CSS. убедитесь, что вы завершаете весь код диалога с помощью очень уникального идентификатора (что-то вроде gjkelrgjkewrl849603856903ID – и начинайте с него все свои селектора CSS, чтобы избежать столкновений).
Вам нужно удалить код style="display:none" если вы хотите, чтобы диалог был открыт автоматически.
Попробуйте этот код:
<head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <style> .ui-widget-header { border: 1px solid #aaaaaa; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; font-size: 20pt;} </style> <script> $(document).ready(function() { $( "#thedialog" ).dialog( "destroy" ); $( "#thedialog" ).dialog({height:400, width:600, modal: true, buttons: {Cancel: function() {$( this ).dialog( "close" );}} }); }); </script> </head> <body> <?php $targetlink = 'http://www.yahoo.com'; echo file_get_contents($targetlink); ?> <div id="thedialog" title="Simple dialog box">My girl lollipop</div> </body>
Я пробовал свой код, и это сработало для меня. Возможно, у вас есть сообщение об ошибке php в сгенерированном источнике, и оно конфликтует с вами JS-кодом.
Проверьте сгенерированный источник в браузере.