加載jQuery的工具提示的另一頁

我的HTML代碼是：加載jQuery的工具提示的另一頁

<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; 

      } 

     } 
    }); 
});

來源

2013-07-05 Abhishek Suthar

教程：eyeroll：你要對這個錯誤的。如果您真的想不經修改就顯示來自其他域的內容，那麼您必須使用iframe，並且只有當網站允許其內容在iframe中顯示時（這裏有與幀相關的響應標題，以允許或否認能見度 - 我忘記了具體情況）。 – JayC

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

禾不會因爲您要加載另一個網站而返回任何內容。這與AJAX如何工作有關。

From jQuery docs：

的.load（）方法，不像$獲得（），允許我們指定的一部分遠程文檔插入。

出於安全原因，它允許用戶在同一個域上加載文件，而不是外部文件。
如果您觀察到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");

來源

2013-07-05 06:43:21 Pankucins

如果域名是相同的，那麼它會工作嗎？你可以給你的想法的代碼片段？ –

我把** $（「#foo」）.load（'http://jsfiddle.net/friiks/DfD4m/'）; **仍然沒有工作。如果網站有限制，那麼請你給我工作的例子?? –

要在jsfiddle上測試ajax調用，請檢查頁面左側的「Ajax請求」選項卡。 – Pankucins

這是因爲您正在嘗試製作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

來源

2013-07-05 07:01:30

我想在J2EE中使用這個東西。 –

請參閱以下教程以瞭解如何使用J2EE http://www.mysamplecode.com/2012/02/access-control-origin-not-allowed.html設置「CORS AJAX代理」 –

加載jQuery的工具提示的另一頁

回答

相關問題