Диалог jQuery поверх контента с другого сайта

Я использую прекрасную и простую команду jQuery dialog, чтобы открыть диалоговое окно перед некоторым встроенным сторонним контентом. Этот встроенный контент может быть страницей любого веб-сайта. Я МОГУ заставить это работать на некоторых сайтах (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, а не вводить альтернативный фреймворк/метод.


php dialog jquery modal-dialog jquery-ui
person Steve    schedule 24.08.2012    source источник
comment
Я проверил код, и он, кажется, работает. - Мне нужно больше деталей, чтобы помочь   -  person guy mograbi    schedule 24.08.2012
comment
Я предлагаю вам использовать хром с f12, чтобы увидеть, есть ли ошибки в консоли JS. для получения более подробной информации я создал вики-страницу с инструментами для разработчиков в Chrome: wiki.mograbi.info/developers-tools-for-web-development — в этом посте также объясняется, как отлавливать ошибки JS разными методами.   -  person guy mograbi    schedule 24.08.2012
comment
Ничто не открывает диалоговое окно. Удалите style=display:none; часть вашего div и добавьте параметр autoOpen: true к вашему созданию диалога   -  person sdespont    schedule 24.08.2012
comment
Правильно - код КАК ЕСТЬ работает, но, как я уже упоминал, если вы прокомментируете строку $targetlink = 'yahoo.com '; и раскомментируйте строку // $targetlink = 'msn.com'; это не сработает   -  person Steve    schedule 24.08.2012
comment
И вам не нужно уничтожать свое диалоговое окно перед созданием   -  person sdespont    schedule 24.08.2012
comment
Привет @Steve - я имею в виду, что он работает с комментариями / раскомментариями, как вы предложили. Я успешно открыл диалог с тремя ссылками под НЕРАБОТАЮЩИМ комментарием.   -  person guy mograbi    schedule 24.08.2012

Ответы (4)


arrow_upward
3
arrow_downward

[edit] По-видимому, у некоторых людей он работает.. Я сам не могу заставить его работать без изменений, указанных ниже.. [/edit]

Консоль Firebug полезна для отладки подобных вещей. В этом случае я получил сообщение об ошибке $('#thedialog') is not a function.

Я заработал, используя 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).

Посетите эту страницу для получения дополнительной информации.

person Terry Seidler    schedule 24.08.2012
comment
ЭТО ЛУЧШИЙ ОТВЕТ - Я бы «проголосовал», если бы мог, чтобы показать другим, что это решило проблему, но я здесь новичок, поэтому, если кто-то еще может проголосовать за этот ответ для меня (чтобы помочь другим узнать, что это тот, который решил проблему) это было бы здорово. Спасибо, Терри - это очень помогло - у меня было предчувствие, что мог произойти тип конфликта - я даже наткнулся на команду "noConflict", но не смог заставить ее работать - вы очень помогли - person Steve; 24.08.2012
comment
@Steve - теперь он должен проголосовать с 15 очками, но также взгляните на пост Гая Мограби, похоже, у него немного больше опыта в этом;) - person Terry Seidler; 24.08.2012

arrow_upward
5
arrow_downward

хотя я не смог воспроизвести проблему со своей стороны, ответ Терри Зайдлера действителен. Вы столкнетесь с конфликтами с сайтами, на которых уже есть диалоги и JQuery.

У вас есть 2 метода решения этой проблемы (я не думаю, что метод «без конфликтов» подойдет, поскольку вы также используете плагины пользовательского интерфейса)

  1. проверьте, определено ли $ и определено ли $.dialog. Если он определен, используйте то, что есть на сайте, в противном случае используйте динамическую загрузку

  2. используйте необработанный 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 в любом другом месте страницы будет предупреждать "это напечатает меня". Таким образом, вы не повредите загружаемые страницы (что также следует учитывать), и они не повлияют на вас.

Как это будет выглядеть? Чтобы узнать, как добавить необработанный обработчик загрузки JS, вы можете взглянуть на этот вопрос о переполнении стека. скажем, что-то вроде 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 и другие вещи, как я указываю здесь.

Кстати, что касается CSS, у вас могут возникнуть такие же проблемы. Например, вы ссылаетесь на класс .bottom — другие сайты могут иметь именно этот класс и собственный CSS. убедитесь, что вы обернули весь код диалога очень уникальным идентификатором (что-то вроде gjkelrgjkewrl849603856903ID - и запустите все свои селекторы CSS с ним, чтобы избежать коллизий).

person guy mograbi    schedule 24.08.2012
comment
Хороший! Спасибо за объяснение! - person Terry Seidler; 24.08.2012
comment
Парень, спасибо за ответ - ответ Терри решил проблему, и все работает. Однако вы предполагаете из своего ответа, что я все еще могу столкнуться с будущими проблемами/конфликтами, которые я еще не обнаружил, поэтому стоит попробовать ваш подход, даже если Терри сработал? Я пробовал то, что, как мне кажется, вы имели в виду, но это не сработало (без сомнения, из-за моего кода, а не из-за вашего предложения!): myfunc() { $(document).ready(function() { $( "#thedialog" ).dialog({height:400, etc, etc }); }; <body onLoad="myfunc();"> etc, etc... - person Steve; 24.08.2012

arrow_upward
0
arrow_downward

Вам нужно удалить код 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>
person sdespont    schedule 24.08.2012
comment
Согласен, вы правы (это был фрагмент кода, оставшийся от более полной версии - диалоговое окно запускалось при нажатии, поэтому display:none скрывало содержимое диалога до тех пор, пока не произошло нажатие. Спасибо за комментарий) - person Steve; 24.08.2012

arrow_upward
-1
arrow_downward

Я попробовал ваш код, и он сработал для меня. Возможно, у вас есть сообщение об ошибке php в сгенерированном исходном коде, и оно конфликтует с вашим JS-кодом.

Проверьте сгенерированный источник в браузере.

person pirklajos    schedule 24.08.2012
comment
Это действительно комментарий, а не ответ. Имея немного больше представителей, вы сможете публиковать комментарии. На данный момент я помечаю этот пост для удаления. - person Lix; 24.08.2012