来自另一个网站的内容的jQuery对话框 [英] jQuery dialog over content from another site
问题描述
我使用jQuery的可爱而简单的对话框命令在一些嵌入式第三方内容之前打开一个对话框。嵌入式内容可能是任何网站的页面。我可以让这个工作在某些网站（Yahoo，Google）上工作，但我不能使其在其他网站上工作（MSN，Johnlewis，FT）。
I'm using jQuery's lovely and simple dialog command to open a dialog box in front of some embedded 3rd party content. This embedded content could be a page from any website. I CAN get this to work on some sites (Yahoo, Google) but I CANNOT get it to work on other sites (MSN, Johnlewis, FT).
我已经从下面的代码中尽可能地删除了这个问题的裸露的骨骼 - 显示的代码正常，对话框显示。但是，请注释YAHOO行，取消MSN行的注释，然后对话框将不显示！
I've stripped out as much as possible from the code below to give the bare bones of the problem - the code as it is shown works fine and the dialog box does display. But, comment out the YAHOO line and uncomment the MSN line, then the dialog won't display!!
<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>
我唯一可以想到的是它必须是一个非工作的网站冲突的东西使用我的代码 - 我已经尝试过一切错误的陷阱问题，但找不到导致它的原因。
The only thing I can think is it must be something on one of the non-working websites that's conflicting with my code - I've tried everything to error-trap the issue but can't find what's causing it.
任何人都可以帮我吗？
注意：
- （1）我知道显示的示例不需要PHP，但更全面的版本
（我刚刚剥离了大部分PHP代码，以保持此示例
小）。
- （2）我在更全面的版本
的页面中使用JQuery，所以我希望留在JQuery，而不是引入一个替代框架/方法。
NOTES: - (1) I know the example as shown doesn't need PHP, but the fuller version does (I just stripped most of the PHP code away to keep this example small). - (2) I'm using JQuery elsewhere in the page on the fuller version so ideally I'd like to stay with JQuery, rather than introducing an alternative framework/method.
推荐答案
显然， 对于某些人而言，我自己无法使其工作，虽然... [/ edit]
[edit] Apparently it is working for some people.. I myself cannot get it to work without the changes below though.. [/edit]
Firebug控制台对于这样的调试很有用。在这种情况下，我得到一个 $（'＃thedialog'）不是一个函数错误消息。
The Firebug console is useful for debugging stuff like this. In this case, I got a $('#thedialog') is not a function error message.
我使用jQuery noConflict ：
I got it working using 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）。
My guess is that something on those pages is conflicting/overriding $, but this seems to work fine (tested msn.com).
查看此页面获取更多信息。
这篇关于来自另一个网站的内容的jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
