로드 JQuery와 툴팁의 다른 페이지

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> 

내 자바 스크립트 코드는 다음과 같습니다

$(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

하지만를 다른 URL에서 다른 페이지를로드하고 싶습니다. www.google.com이 툴팁에 있습니다.

내가 무엇을하고 있는가하는 것입니다 : 내가 응답 HTML을 얻고 툴팁 여기

에 반환 할 수 있도록 내가이 콘텐츠 섹션에서 .load() 기능을 걸었습니다

하는 내 코드 만 응답에서의 작동하지 않는 내가 무엇입니까 아무것도 ...

$(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

는 :

$ 갔지 (달리 .load() 메소드) 우리가 삽입 원격 문서의 일부를 지정할 수있다.

사용자는 보안상의 이유로 외부 도메인이 아닌 동일한 도메인에 파일을로드 할 수 있습니다.
방화 광로가 열린 this fiddle을 확인한 경우 전화가 200 OK 헤더를 반환하지만 이러한 제한으로 인해 아무것도로드되지 않습니다.

원하는 것을 얻으려면 원하는 페이지를 가져 오는 로컬 파일을 만들 수 있습니다. 웹 사이트를 직접 호출하는 대신 아약스 호출을 수행하십시오.

---

로컬 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/을 읽어 알고하십시오. http://client.cors-api.appspot.com/client

대안은 서버에 PHP proxy을 다음 프록시를 통해 CORS 요청을하는 것입니다 : 서버는 다음 웹 사이트를 사용할 수 있습니다 CORS 지원하는 경우

테스트합니다. eyeroll : 여기

자신의 PHP 프록시 http://jquery-howto.blogspot.in/2009/04/cross-domain-ajax-querying-with-jquery.html