php - 来自另一个站点的内容的 jQuery 对话框

Question

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

score 5 · Accepted Answer

即使我无法重现我的问题，特里塞德勒的回答是有效的。您将遇到与已经有对话框和 JQuery 的站点的冲突。

你有 2 种方法来解决这个问题（我不认为“无冲突”方法会像你使用 UI 插件一样）

检查是否$已定义和$.dialog已定义。如果已定义，则使用站点拥有的内容，否则使用动态加载
使用原始 JSonload为页面/窗口添加处理程序，并运行一个函数。在此函数中，您应该粘贴 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 处理程序，您可以查看这个 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 选择器以避免冲突）。

score 3 · Accepted Answer

[编辑] 显然它对某些人有用.. 我自己无法在没有以下更改的情况下使其工作.. [/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）。

请查看此页面以获取更多信息。

score 0 · Accepted Answer

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>

score -1 · Accepted Answer

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

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

php - 来自另一个站点的内容的 jQuery 对话框

4 回答 4

Related