2012-09-21 8 views
0

문제 :ajax div에 원격 URL로드

많은 사이트의 뉴스 피드를 표시하고 있습니다. 링크를 클릭하면 모달 패널이 팝업되고 모달 패널에 링크 내용이로드되어야합니다. 나에 의해 시도

솔루션 :

  1. 는 $를 JQuery와로드를 사용하여 얻을 방법을 원격 URL의 내용을 얻을 수 있습니다.. 사이트가 차례로 html의 상대 URL을 사용한다는 것을 제외하면이 방법은 정상적으로 작동합니다. 예를 들어. ibm.com 이미지를 참조하는 경우는 iframe을 사용하여 시도

    <img src="/some/relative/path/image.jpg" />

  2. 같은 자신의 소스를 가지고있다. 일부 사이트에서는 정상적으로 작동하지만 일부 사이트는 iframe에 표시되지 않고 오류 메시지가 표시됩니다.

    X-Frame-Options에서 금지 된 표시 때문에 문서 표시를 거부했습니다.

    적절한 해결책을 알려 주시기 바랍니다

답변

0

그것의 더 나은 당신이 JQuery와 load 방법을 사용할 수 있습니다

예 : - $("#someDiv").load("external_url");

+0

그것은 상대 URL의 문제를 해결 의지를? –

+0

여기에 멍청이가 있는데, 이것으로 http://api.jquery.com/load/ –

+0

을 해결할 수 있습니다. 관련 URL 문제가 발생하지 않거나 바이올린을 게시 할 수 있다는 사실을 알리는 절을 가르쳐 주시겠습니까? –

0

나는 당신이하고자하는 jQuery.load 접근 방식에 갈 것이다 상대 URL 문제를 해결하려면 약간의 해결 방법이 필요합니다.

로드 메소드에는 콜백 옵션이 있습니다.이 메소드를 사용하면 삽입 된 상대 URL을 수정할 수 있습니다. 이 같은 것을 할 수

:

var baseSite = "http://www.somewhere.com"; 
var baseURL = "/your/folder/"; 
var container = $('#container').load(baseSite+baseURL+"your-page.html", function(){ 
    //once you're here, DOM has been updated already! 

    //fix relative URLs like "../assets/img/logo.png" 
    container.find("img[src^='/']").each(function(){ 
     $(this).attr('src', baseSite+baseURL+$(this).attr('src')); 
    }); 

    //fix absolute URLs like "/base/path/img/logo.png" (needed only if different domain!) 
    container.find("img[src$='/']").each(function(){ 
     $(this).attr('src', baseSite+$(this).attr('src')); 
    }); 

    //TODO: the same for links! 
});