导入没有 iframe 的外部 URL 内容答案

【问题标题】：Import external URL content without an iframe导入没有 iframe 的外部 URL 内容
【发布时间】：2012-08-14 13:20:16
【问题描述】：

我正在为希望将自己的动态最新新闻提要嵌入到我们网站右侧的客户开展一个项目。这是一个相当自定义的模块，包含视频和链接，而不仅仅是 RSS 或 Twitter。

客户已经将此内容上传到他们的服务器上，作为一个专门供我们抓取的页面，并提供了网址。

我可以使用 iFrame 嵌入内容，但他们的链接中没有 target="_parent"，因此如果单击链接，新内容会加载到 iframe 中，这不是我们想要的。我们希望它在新标签中打开。很遗憾，我们无法更改他们的内容或要求他们更改 2 周 - 这为时已晚！更烦人的是，我们不在同一个域中。

我们的系统建立在我不知道的asp.net 上（我更喜欢PHP！）。还值得一提的是，我是这个角色的前端开发人员，无法访问或修改任何 asp.net 代码。

我尝试使用 jQuery .load() 没有成功。作为一个新手，我不确定解决这个问题的正确方法，或者是否有可能使用前端技术？

与我类似的问题似乎都过时了，因此最好获得最新和最好的方法。

谢谢。

【问题讨论】：

标签： javascript jquery html url

【解决方案1】：

如果你用.load() 拉入他们的内容，它有一个完成时的回调函数。只需遍历该部分中的所有 <a> 链接，然后更改它们的 target= 以在新选项卡中打开！

css: target-new: tab ! important（不幸的是这只是css3兼容）

【讨论】：

【解决方案2】：

如果您可以确保正在加载的页面中的<head> 包含：

<base target="_blank" />

然后所有链接将在新窗口中打开。如果您无法确保页面在其<head> 中包含该内容，则可以选择通过服务器端 HTTP 请求下载页面数据，并在将页面嵌入您的框中之前手动添加该标签。如果你不想做任何服务器端的工作，你还不如在客户端做。以下是如何做到这一点的简化版本：

$.get("http://exampleurl.com/", function (data) {
    var pos = data.indexOf("<head>");
    if(pos == -1) {
        //pretty impossible
        return;
    }
    data = data.substr(0, pos + 5) + '<base target="_blank" />' + data.substr(pos + 6, data.length - (pos + 6));
    //display data
});

【讨论】：

“我们不能改变他们的内容” :-(

【解决方案3】：

使用 jQuery .load()，您需要提取页面上的所有 JS 代码并使其针对该部分，因为它只会加载 DOM 元素。这有点棘手，但在更改一些内容和路径后，您就可以让它工作了。

另一种可能更简单的方法，但只有在同一个域中才有效：

$("#iFrame").contents().find("a").on("click",function(e)
{
    e.preventDefault();
    // then use the href to virtualy create a link click event :-)
});

【讨论】：