Ste*_*eve 6 php jquery dialog jquery-ui modal-dialog
我正在使用jQuery的可爱而简单的dialog命令在一些嵌入的第三方内容前面打开一个对话框.此嵌入内容可以是来自任何网站的页面.我CAN得到这个在一些网站(雅虎,谷歌)工作,但我CAN NOT让它在其他网站(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,而不是引入替代框架/方法.
即使我无法重现这个问题,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 - 你可能会遇到同样的问题.例如,您引用类.bottom - 其他站点可能具有自己的确切类和CSS.确保用一个非常独特的ID包装整个对话框代码(类似于gjkelrgjkewrl849603856903ID- 并启动所有CSS选择器以避免冲突).
[编辑]显然它对某些人有用..如果不进行以下更改，我自己就无法让它工作..[/编辑]
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）。
请查看此页面以获取更多信息。
| 归档时间： |
|
| 查看次数： |
565 次 |
| 最近记录： |