ajax 将远程 url 加载到 div答案

【问题标题】：ajax loading a remote url to a divajax 将远程 url 加载到 div
【发布时间】：2012-09-21 12:11:17
【问题描述】：

问题：

我正在显示来自许多网站的新闻提要。当我点击一个链接时，我希望弹出一个模态面板，并且模态面板必须加载链接的内容。

我尝试过的解决方案：

使用Jquery load,$.get 方法获取远程url 的内容。这很好用，除了网站反过来在其 html 中使用相对 url 的事实。例如。 ibm.com 引用图像时的来源类似于

<img src="/some/relative/path/image.jpg" />
尝试使用 iframe。它在某些网站上运行良好，但某些网站无法在 iframe 中显示并抛出错误消息

拒绝显示文档，因为 X-Frame-Options 禁止显示。

请提供合适的解决方案

【问题讨论】：

标签： jquery ajax iframe

【解决方案1】：

最好用jquery load方法

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

【讨论】：

你能指出我的部分，它告诉我不会发生相对 urls 问题，或者你能发布一个小提琴吗？

【解决方案2】：

我会采用 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!
});

【讨论】：