我使用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，而不是引入另一种框架/方法。
尽管我无法在自己的一端重现这个问题，Terry Seidler的答案是有效的。您将遇到与已经具有对话框和JQuery的站点发生冲突的情况。
你有两种方法来解决这个问题（我不认为"无冲突"方法会起作用，因为你也在使用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处理程序，您可以看看这个stackoverflow问题。比方说它有点像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，你可能会遇到同样的问题。例如，你引用了class.bottom——其他网站可能有自己的类和CSS。请确保使用一个非常唯一的ID（类似于gjkelrgjkewrl849603856903ID-并使用它启动所有CSS选择器以避免冲突）包装整个对话框代码。
[edit]显然，它对某些人有效。。不过，如果没有以下更改，我自己就无法使其发挥作用。。[/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测试）
查看此页面以了解更多信息。
如果希望对话框自动打开，则需要删除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>
我试过你的代码，它对我很有效。也许您在生成的源代码中有一条php错误消息，它与您的JS代码冲突。
在浏览器中检查生成的源。