Question

问题：

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

我试过的解决方案：

使用Jquery load，$。get方法获取远程URL的内容。这种方法很好，除了网站反过来在他们的html中使用相对网址。例如。 ibm.com在提到图像的时候有像
这样的来源
<img src="/some/relative/path/image.jpg" />
尝试使用iframe。它在某些网站上运行正常，但某些网站无法在iframe中显示并抛出错误消息

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

请告知适当的解决方案

Answer 1

您可以更好地使用jquery load方法

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

Answer 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!
});

ajax将远程URL加载到div

2 个答案: