Question

我的HTML代码是：

<div class="ui-widget photo">
    <div class="ui-widget-header ui-corner-all">
         <h2>St. Stephen's Cathedral</h2>

         <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="data-geo">Vienna, Austria</a></h3>

    </div>
    <div id="result"></div>
</div>

我的Javascript代码是：

$(function () {
    $(document).tooltip({
        items: "[href]",
        content: function () {
            var element = $(this);
            if (element) {
                var text = element.text();
                var link = element.attr('href');
                // alert(link);
                return "<img class='map' alt='" + text +
                    "' src='http://maps.google.com/maps/api/staticmap?" +
                    "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                    "Vienna, Austria" + "'>";

            }

        }
    });
});

这件事在这里给出：

jQuery tooltip

但是现在我想从另一个网址加载另一个网页，在此工具提示中输入 www.google.com 。

我正在做的是：

我在此内容部分中放置 .load（）函数，以便我可以获取响应html并将其返回到工具提示

这是我的代码，但它不起作用我没有得到任何回应......

$(function () {
    $(document).tooltip({
        items: "[href]",
        content: function () {
            $('#result').load('http://stackoverflow.com/', function (response, status, xhr){
                var responseText = response;

            });
            var element = $(this);
            if (element) {
                var text = element.text();
                var link = element.attr('href');
                // alert(link);
                return responseText;

            }

        }
    });
});

Answer 1

$.load('http://stackoverflow.com');

由于您正在尝试加载其他网站，因此不会返回任何内容。这与AJAX的运作方式有关。

From jQuery docs：

与$ .get（）不同，.load（）方法允许我们指定一部分要插入的远程文档。

出于安全原因，它允许用户在同一域上加载文件，而不是外部文件如果您在启动了firebug的情况下发现this fiddle，则可以看到该调用将返回标头200 OK但由于这些限制而无法加载任何内容。

要实现您想要的功能，您可以创建一个本地文件来获取所需的页面，然后对其进行ajax调用，而不是直接调用该网站。

使用本地php文件获取页面的简单示例。创建一个本地文件，我称之为foo.php

<?php
   echo file_get_contents($_GET['url']); 
   // this will echo contents of given url
?>

介意，这只是一个示例代码，不适合用于

然后像这样称呼它

$("#container").load("foo.php?url=google.com");

Answer 2

这是因为您正在尝试进行CORS（跨源资源共享）请求。并且由于安全问题，浏览器和服务器不会接受此类请求，除非服务器返回Access-Control-Allow-Origin标头以及其可接受的请求域。

要知道CORS何时发挥作用，请阅读：http://en.wikipedia.org/wiki/Same_origin_policy#Origin_determination_rules

要了解有关CORS的更多信息，请阅读以下文章http://www.html5rocks.com/en/tutorials/cors/。

要测试服务器是否支持CORS，您可以使用以下网站：http://client.cors-api.appspot.com/client

另一种方法是在您的服务器上创建PHP proxy，然后通过该代理发出CORS请求。

以下是创建自己的PHP代理http://jquery-howto.blogspot.in/2009/04/cross-domain-ajax-querying-with-jquery.html

的教程

在jquery工具提示中加载另一个页面

2 个答案: