JqueryUI:打开对话框的链接

Question

我有这个代码，当链接被点击时，它应该会创建一个带有google页面的对话框：

<?php use_javascript('/sfJqueryReloadedPlugin/js/jquery-1.3.2.min.js') ?>
<?php use_javascript('/sfJqueryReloadedPlugin/js/plugins/jquery-ui-1.7.2.custom.min') ?>
<?php use_stylesheet('/sfJqueryReloadedPlugin/css/ui-lightness/jquery-ui-1.7.2.custom.css') ?>

<script type="text/javascript">

        $(function (){
                $('a.ajax').click(function() {
                        var url = this.href;
                        var dialog = $('<div style="display:hidden"></div>').appendTo('body');
                        // load remote content
                        dialog.load(
                                url, 
                                {},
                                function (responseText, textStatus, XMLHttpRequest) {
                                        dialog.dialog();
                                }
                        );
                        //prevent the browser to follow the link
                        return false;
                });
        });

</script>

<a class="ajax" href="http://www.google.com">
          Open a dialog
</a>

问题:它显示了对话框，但google不在里面。

我对以下内容没有任何问题：

<script type="text/javascript">
    $(function() {
        $("#dialog").dialog();
    });
    </script>


<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

有什么想法吗？

哈维

Answer 1

您不能发出跨域ajax请求。这意味着您不能从google.com获取html并将其放入对话框中。如果你想让google出现在你的对话框中，那么你可能会想要使用一个iframe，或者只是编写你自己的html，让它看起来像google，当他们点击搜索时，打开一个新的窗口来显示搜索结果。

Answer 2

出于安全原因，您不能向最初提供网页的域以外的其他域发出AJAX请求。有关安全风险的示例，请参阅http://en.wikipedia.org/wiki/Same_origin_policy

相反，您应该考虑使用一个隐藏的iframe，其中加载了Google页面，当单击按钮时，该页面将出现在正确的位置。

例如：

<iframe src="http://www.google.com/" style="display:none">
  <p>Your browser does not support iframes.</p>
</iframe>