2012-09-21 47 views
0

問題:ajax將遠程URL加載到div

我正在顯示來自許多站點的新聞饋送。當我點擊一個鏈接時,我想要一個模態面板彈出,模態面板必須加載鏈接的內容。

解決方案試圖通過我:

  1. 使用jQuery的負載,$ get方法來獲得遠程URL的內容。 這工作正常,除了站點反過來在他們的HTML中使用相對URL的事實。 例如。 ibm.com參照圖像時具有它們的源像

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

  2. 使用iframe中試過。它在一些網站上工作正常,但是有些網站被阻止顯示在iframe中並且拋出錯誤消息

    拒絕顯示文檔,因爲X-Frame-Options禁止顯示。

    請一個合適的解決方案建議

回答

0

其更好,你可以使用jQuery load方法

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

+0

既解決了相對URL的問題? –

+0

有一個loook在這裏,這將解決http://api.jquery.com/load/ –

+0

你能指出我的部分教育我的相關網址問題不會發生或你可以發佈小提琴嗎? –

0

我會去一個jQuery.load的方法,那麼你會需要一些解決方法來解決相關的URL問題。

load方法有一個回調選項,您可以使用它來修復注入的相對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! 
});