如何解析嵌入的iFrame以仅显示iFrame页面中的片段

Question

对于我的类似Greasemonkey的脚本，我在Amazon.co.uk上加载了一个https页面，我希望在链接页面上显示商品的价格。

到目前为止我一直在做的事情：

我尝试使用iFrame来显示窗口：

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
var iframeSrc = prodLinks[0].href;
iframeSrc = iframeSrc.replace (/http:///, "https://")
    $("body").append ('<iframe id="gmIframe" src="' + iframeSrc + '"></iframe>');

$("#gmIframe").css ( {
    "position":     "absolute",
    "bottom":       "1em",
    "left":         "2em",
    "height":       "25%",
    "width":        "84%",
    "z-index":      "17",
    "background":   "#00FF00"
} );
}

这种方法的问题是，虽然它有时有效，但iFrame的内容过于杂乱，所以我一眼就看不到需要什么。

我想立即看到的东西：2.85英镑

让我们假设链接的页面是https://www.amazon.co.uk/gp/product/B001AM72BM/

上述页面中的相关HTML片段：

<tr id="actualPriceRow">
<td id="actualPriceLabel" class="priceBlockLabelPrice">Price:</td>
<td id="actualPriceContent"><span id="actualPriceValue"><b class="priceLarge">£2.85</b></span>
<span id="actualPriceExtraMessaging">

确切地说，我如何解析iFrame，以便只显示价格？

在本例中，我想要显示的关键信息是£2.85

背景：我用的是类似Greasemonkey的东西

这是Fluid.app上的Greasekit（它很旧，但我必须使用它）。你可能根本不需要知道，因为它与Greasekit非常相似。所以，为了这个问题的目的，你可以假装它是

备注

源页面和iFramed页面都是https://amazon.co.uk*。我无法链接到它，因为它需要我登录。

如果你愿意，你可以访问dropbox上页面的镜像。显然，由于相同的原产地政策，这些东西可能在这个镜像中不起作用。

Answer 1

如果iframe是同一个域（在您的案例中似乎是这样），那么您可以通过等待它加载，然后使用jQuery搜索和操作它的内容来解析iframe，

在这里，我们想要找到<b class="priceLarge">£2.85</b>节点并删除其他所有节点。

做这一切的代码是：

$("#gmIframe").load ( function () {
    var ifrmJQ      = $("#gmIframe").contents ();
    var targNode    = ifrmJQ.find (".priceLarge");
    var ifrmBody    = ifrmJQ.find ("body");
    ifrmBody.empty ();
    ifrmBody.append (targNode);
} );

您可以将此代码块放在问题中代码的$("body").append ('<iframe行之后。