有没有办法减少使用 Javascript 下载资源（图像/css 和 js 文件）？

Question

我的本​​地主机上有一个 html 页面 - get_description.html。

下面的sn-p是部分代码：

<input type="text" id="url"/>
<button id="get_description_button">Get description</button>
<iframe id="description_container" src="#"/>

单击按钮时，iframe 的src 设置为在文本框中输入的 url。以这种方式获取的页面非常大，有很多链接文件。我对该页面感兴趣的是包含在 <div id="description"> 元素中的一段文本。

有没有办法减少加载到 iframe 的页面中链接的资源的下载？

我不想使用 curl，因为数据仅供登录用户使用，并且使用 curl 获取内容的步骤太复杂。 iframe 很简单，因为我在一个盒子上使用它，它发送正确的 cookie 来识别来自登录用户的请求，但问题是获取近 1 MB 的数据来保留 1 KB 是非常浪费的把剩下的扔掉。

编辑

如果建议的方法只适用于 Firefox，那很好，所以我添加了 Firefox 标签。此外，答案可能实际上来自 Firefox 附加技术领域，所以我也添加了该标签。

问题不在于我无法找到我正在寻找的东西，而是问题在于简单的iframe 方法很浪费。

我知道 Firefox 只允许加载页面的文本。如果您打开一个页面并按 Ctrl+U 您将被带到“查看页面源代码”窗口，如果您点击一个链接，链接的行为正常并且是可点击的在源视图中，新页面的源被加载到视图源窗口中，而没有下载链接的资源，这正是我想要得到的。但我不知道如何访问这种行为。

另一个例子是 Adblock 插件。它以某种方式在元素加载之前杀死元素。使用纯 Javascript 这是不可能的。因为它只是触发得太晚而无法及时干预。

Answer 1

Same Origin Policy 禁止任何网页访问不同域中任何其他网页的内容，所以基本上你不能这样做。

但是，对于某些浏览器，如果您尝试从本地网页访问它，则似乎允许访问网页内容，这似乎是您的情况。

Safari、IE 6/7/8 是允许本地网页通过 XMLHttpRequest 执行此操作的浏览器（来源：Google Browser Security Handbook），因此您可能需要选择使用其中一种浏览器来执行您需要的操作（注意这些浏览器的未来版本可能不再允许这样做）。

这个解决方案的一部分我只看到两种可能性：

• 如果您需要从获取内容的网页以某种方式由您控制，您可以创建一个更简单的界面让其他网页获取您需要的内容（例如允许JSONP请求）。
• 如果您需要从获取内容的网页不受您控制我看到的唯一解决方案是直接从服务器获取内容服务器端登录（我知道您不想这样做，但如果我前面提到的不可行，我认为没有其他可能性）

希望对你有帮助。

Answer 2

其实我之前见过Cross Domain jQuery .load请求，这里：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

作者声称在该页面上发现了类似的代码

$('#container').load('http://google.com'); // SERIOUSLY!

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});

// Works with $.get too!

会起作用的。 （由于最近重新设计，BBC 代码可能无法正常工作，但您明白了）

显然它是使用包装在 jQuery 插件中的 YQL 来实现这一点的。现在我不能说我完全理解他在那里所做的事情，但它似乎有效，并且符合要求。一旦你加载了数据，我想过滤掉你需要的数据是一件简单的事情。

如果您更喜欢在浏览器级别运行的东西，我可以建议 Mozilla 的 Jetpack 框架用于轻量级扩展。我还没有完整阅读文档，但它应该包含此工作所需的 API。

Answer 3

在 AJAX 中有多种方法可以解决此问题，为了简洁起见，我将展示 jQuery 方法作为一种选择，尽管您也可以在原生 JavaScript 中执行此操作。

您可以只使用容器来代替<iframe>，比如<div>，如下所示：

<div id="description_container"></div>

然后加载它：

$(function() {
  $("#get_description_button").click(function() {
    $("#description_container").load($("input").val() + " #description");
  });
});

这使用.load() 方法，该方法采用以下格式的字符串：.load("url selector")，然后将该元素放入页面并将其内容放入您正在加载的容器中，在本例中为#description_container。

---

这只是jQuery的路线，主要是为了说明是的，你可以做你想做的，但你不必完全像这样去做，只是说明概念是从AJAX请求中得到你想要的，而不是<iframe>。

Answer 4

您的描述听起来像是从同一个域获取页面（您说您需要登录并拥有会话凭据）所以您是否尝试过通过XMLHttpRequest 使用异步请求？如果页面上的 html 特别混乱，它可能会抱怨，但您仍然可以通过 .responseText 获取原始文本并使用正则表达式提取您需要的内容。