来自另一个站点的内容的 jQuery 对话框答案

【问题标题】：jQuery dialog over content from another site来自另一个站点的内容的 jQuery 对话框
【发布时间】：2012-08-20 00:42:27
【问题描述】：

我正在使用 jQuery 的可爱而简单的dialog 命令在一些嵌入的第 3 方内容前面打开一个对话框。该嵌入内容可以是来自任何网站的页面。我可以让它在某些网站（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，而不是引入替代框架/方法。

【问题讨论】：

我检查了代码，它似乎工作。 - 我需要更多详细信息才能提供帮助
我建议你使用 chrome 和 f12，看看你是否在 JS 控制台中出现错误。有关更多详细信息，我在 chrome 中设置了一个关于开发人员工具的 wiki 页面：wiki.mograbi.info/developers-tools-for-web-development - 这篇文章还解释了如何以不同的方法错误捕获 JS。
没有打开你的对话框。删除 div 的 "style="display:none;" 部分并将参数 "autoOpen: true" 添加到对话框创建中
正确 - 代码原样工作，但正如我所提到的，如果您注释掉“$targetlink = 'yahoo.com';”行并取消注释“// $targetlink = 'msn.com';”行它不会工作
而且你不需要在创建之前销毁你的对话框

标签： php jquery jquery-ui dialog modal-dialog

【解决方案1】：

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

你有 2 种方法来解决这个问题（我不认为“无冲突”方法会像你使用 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 和其他东西，就像我在这里指定的那样。

顺便说一句——关于 CSS——你可能会遇到同样的问题。例如，您引用类 .bottom - 其他网站可能有自己的确切类和 CSS。确保使用一个非常独特的 ID 包装整个对话框代码（例如 gjkelrgjkewrl849603856903ID - 并使用它启动所有 CSS 选择器以避免冲突）。

【讨论】：

不错的一个！谢谢你的解释！
伙计，感谢您的回答 - 特里的回答解决了问题，一切正常。但是，您是否从您的回答中暗示我可能仍会遇到我尚未发现的未来问题/冲突，所以即使特里有效，也应该尝试您的方法？我已经尝试了我“认为”你的意思，但它没有奏效（毫无疑问是因为我的编码而不是你的建议！）：myfunc() { $(document).ready(function() { $( "#thedialog" ).dialog({height:400, etc, etc }); }; <body onLoad="myfunc();"> etc, etc...

【解决方案2】：

如果您希望对话框自动打开，您需要删除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>

【讨论】：

同意，你是对的（这是更完整版本的剩余代码 - 对话框曾经被触发 onclick，所以 display:none 隐藏对话框内容，直到 onclick ocurred . 感谢您的评论）

【解决方案3】：

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

查看this page 了解更多信息。

【讨论】：

这是最好的答案 - 如果可以的话，我会“投票”，以向其他人展示这解决了它，但我是新来的，所以如果其他人可以投票给这个答案我（帮助其他人知道这是解决问题的人）那会很棒。谢谢特里 - 这是一个很大的帮助 - 我有一种预感可能会发生冲突 - 我什至偶然发现了“noConflict”命令，但无法让它工作 - 你真的很有帮助
@Steve - 现在应该可以投票超过 15 分，但也可以看看 Guy mograbi 的帖子，他似乎对此更有经验；)

【解决方案4】：

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

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

【讨论】：

这真的是评论，而不是答案。多一点代表，you will be able to post comments。目前我将这篇文章标记为删除。