Question

我正在使用jQuery的可爱且简单的dialog命令在一些嵌入的第三方内容前面打开一个对话框。此嵌入内容可以是来自任何网站的页面。我 CAN 可以在某些网站（雅虎，谷歌）上使用它，但我不能让它在其他网站上工作（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，而不是引入替代框架/方法。

Answer 1

即使我无法重现问题，Terry Seidler的回答也是有效的。您将遇到已经具有对话框和JQuery的站点的冲突。

你有两种方法可以解决这个问题（我不认为'没有冲突'的方法会做，因为你也在使用UI插件）

检查是否定义了$并定义了$.dialog。如果已定义，请使用该网站的内容，否则请使用dynamic loading
使用原始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处理程序，您可以查看this stackoverflow question。我们可以说它类似于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和其他东西，就像我在这里指定的一样。

gjkelrgjkewrl849603856903ID

Answer 2

[编辑]显然为某些人工作..虽然没有下面的更改，但我自己无法让它工作.. [/ 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）。

有关详细信息，请查看this page。

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>

Answer 4

我已经尝试过您的代码，它对我有用。也许你在生成的源代码中有一条php错误消息，它与你的JS代码冲突。

在浏览器中检查生成的源。

jQuery对话框来自其他网站的内容

4 个答案: