jquery - ajax 将远程 url 加载到 div

Question

问题：

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

我尝试的解决方案：

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

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

2. 尝试使用 iframe。它在某些网站上运行良好，但某些网站被阻止在 iframe 中显示并抛出错误消息

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

   请提供适当的解决方案

Answer 1

你可以使用jqueryload方法更好

例如：-$("#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!
});