Javascript 如何制作一个类似GreaseMonkey的脚本，在下三分之一处显示不同的页面？

如果你看一下，底部有很多空白

我希望在那个页面上使用脚本，它利用了一些空白并加载另一个页面（使用类似于iFrame的东西）

• 我想在iFrame类型的东西中加载的URL（在下三分之一）总是

  查看Amazon产品页面

  所指向的内容
• 因此，我希望代码查看页面，并找到链接指向的位置。（因为这是变化的位）
• 我希望iFrame类型的东西位于下三分之一。（可以是下四分之一，下五分之一..我不是说真的..）

如果你能帮我集思广益，我将非常感激

选读 它不是很油腻，但你可以假设它是 这是给Greasekit的（它很旧，但我只能使用它）。你可能甚至不需要知道，因为它与Greasekit非常相似。所以，就这个问题而言，你可以假装它是

唯一的区别是你不必做这一点：

//==UserScript==
//@name        _Displaying an iframe type thing in the lower third
//@include     https://dl.dropboxusercontent.com/u/5546881/*
//@grant       none
// ==/UserScript==

我试图回答

var findlink=document.getElementsByTagName（'a'）；
对于（var i=0；i=“查看亚马逊产品页面”i++）{
链接结果=findlink.getAttribute（'href'）
}
$（document.body）.append(
''
);

• 由于有jQuery可用，请使用jQuery选择器获取产品链接
• 然后添加iFrame，但给它一个id
• 使用CSS来定位和调整它的大小

根据您链接的Dropbox页面的结构，代码如下所示：

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

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

var prodLinks=$（“td.product\u说明a:contains（'查看亚马逊产品页面'））；
if（prodLinks.length）{
var iframeSrc=prodLinks[0]。href；
$（“正文”）。附加（“”）；
$（“#gmIframe”）.css（{
“位置”：“绝对”，
“底部”：“1em”，
“左”：“2米”，
“高度”：“30%”，
“宽度”：“94%”，
“z指数”：“17”，
“背景”：“00FF00”
} );
}

---

警告: 仅当至少满足以下条件之一时，此操作才起作用：

• iframe是同一个域
• iframed网站并不禁止跨源框架。（www.amazon.co.uk确实禁止这种框架。）
• 您使用的浏览器不符合跨原点限制。Firefox尊重它，我不知道Fluid是否尊重它

---

我没有点击dropbox链接中的任何内容。我在这里也没有看到任何代码。你试过什么？@Mathletics嘿，我想没必要点击它。（它只是有助于形象化）。我应该制作一个带有注释的屏幕截图。@Mathletics（我可以通过按下“回答你的问题”按钮，在下面将我的代码作为新答案发布吗？还是编辑原始问题？）您可以编辑原始问题。如果答案是，只发布一个答案。啊，我没有JQuery：（我做了，但我只能看到一个绿色的矩形。仅供参考，我正在测试的页面也在Amazon.co.uk上，但我已经将其镜像到dropbox，所以我可以在这个问题中链接到它（不共享我的登录密码）。奇怪的是，如果我将第5行更改为

$（“body”）。append（“”）；

.1.这是否意味着JQuery正在工作？2.也许第5行存在问题，导致它无法检索到正确的URL？您可以通过在第5行之后添加

alert（iframeSrc）

看到它获取了正确的URL。如果删除

id=“gmIframe”，您的iframe将无法正确定位

。是的，某些浏览器会阻止从https页面到http的帧。错误控制台显示了什么？您可以尝试添加

iframeSrc=iframeSrc.replace（/http:\/\/，“https://”）是的，你可以这样做，但这是一个单独的问题。你基本上可以使用jQuery来解析iframe。或者，跳过iframe，使用
GM-xmlhttpRequest
来获取页面。所有这些都包含在现有的SO问题中。如果你问一个新问题，请包括一个到amazon页面的链接及其相关的HT片段ML结构。
var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
    var iframeSrc = prodLinks[0].href;
    $("body").append ('<iframe id="gmIframe" src="' + iframeSrc + '"></iframe>');

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