jQuery的对话框在从其他网站的内容(jQuery dialog over content fro

我使用jQuery的可爱和简单的dialog命令的一些嵌入第三方内容前打开一个对话框。这种嵌入的内容可以来自任何网站的网页。我能得到这个在一些网站（雅虎，谷歌）工作，但我不能让它与其他网站（MSN，约翰路易斯，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的，而不是引入另一种框架/方法。

Answer 1:

[编辑]很显然，它正在对某些人。我自己不能让它不低于尽管变化工作.. [/编辑]

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）。

看看这个页面获取更多信息。

Answer 2:

尽管我无法重现我的问题到底出，特里辛德勒的答案是有效的。你会体验到的碰撞与已有的对话和JQuery网站。

你有2种方法来攻击这个问题（我不认为“无冲突”的方法会同时还使用UI插件做）

检查是否$定义和$.dialog定义。如果它被定义，用什么该网站已，否则使用动态加载
使用原始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 onload处理，你可以看看这个计算器的问题。可以说，这有点像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。请确保你包了整个对话代码一个非常独特的ID（喜欢的东西gjkelrgjkewrl849603856903ID -并开始使用它所有的CSS选择器来避免冲突）。

Answer 3:

您需要删除的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>