1

我正在制作一个将按钮粘贴在页面上的 GreaseMonkey 脚本。单击此按钮时，它会拉出一个新页面。理想情况下，我希望能够像常规 HTML 页面一样格式化此页面。我的限制是我无法制作新的 HTML 文件。生成的所有内容都需要来自此 GreaseMonkey 脚本。

我的 GreaseMonkey 将此代码粘贴在原始页面的正文中

<input type="button" value="push me" onclick="openWin()">

单击时调用此函数：

function openWin()
      {
        myWindow=window.open('','','width=400,height=500');
        myWindow.document.write("Hello World");
        myWindow.focus();
      }

在打开的这个新窗口中，我想放的不仅仅是 Hello World。我想在里面放一张桌子，给文字设置样式，在里面放图片等等。有没有一种简单的方法可以做到这一点？

提前致谢。

4

3 回答 3

1

您可以使用现有的行来创建它：

myWindow.document.write("<table><tr><td style='color:blue'>Do your styling</td></tr></table>");

通过将您的 HTML 倒入“Hello world 当前所在的位置”

或者

您使用以下方法创建 DOM 元素：

var d=document.createElement('div');
d.style.color="blue";

然后附加到窗口对象。

myWindow.appendChild(d);
于 2013-07-25T05:26:11.733 回答
1

聪明而简单的做法是使用GM_getResourceText()Doc。

这样，您只需轻松地制作弹出页面，页面在本地加载，就像您的 GM 脚本一样，您可以使用 3 行简单的代码填充您的智能弹出页面。

例如，创建如下两个文件：

Popup_fun.user.js：

// ==UserScript==
// @name     _Fancy popups, the smart way
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://stackoverflow.com/questions/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @resource popupSrcRz  PopupPage.htm
// @grant    GM_getResourceText
// ==/UserScript==

//-- Don't refire on the popup.
if ( $("#gmDontFireOnMe").length === 0) {

    $("body").prepend (
        '<button id="gmLaunchPopup">Launch a fancy popup</button>'
    );
    $("#gmLaunchPopup").click (openWin);
}

function openWin () {
    var popupSrc = GM_getResourceText ("popupSrcRz");

    myWindow=window.open ('','','width=400,height=500');
    myWindow.document.write (popupSrc);
    myWindow.document.close ();
    myWindow.focus ();
}


弹出页面.htm：

<!DOCTYPE html>
<html><head>
    <title>My fancy popup</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        body { padding: 0 3ex; }
        table {
            margin: 1em;
            padding: 0;
            border-collapse: collapse;
            border: 1px solid darkBlue;
        }
        th, td {
            margin: 0;
            padding: 0.8ex 1em;
            vertical-align: top;
            text-align: left;
            border: 1px solid darkBlue;
        }
        th { background: lightYellow; }
        img { max-width: calc(100% - 3ex); }
    </style>
</head><body>

<p id="gmDontFireOnMe">I'm the popup page.</p>

<p>Here's a table:</p>
<table class="">
    <tr><th>Thing</th><th>Qty</th></tr>

    <tr><td>Flux</td><td>88</td></tr>
    <tr><td>Capacitor</td><td>88</td></tr>
</table>

<p>Here's an image:</p>
<img src="http://media2.s-nbcnews.com/j/MSNBC/Components/Photo/_new/tdy-121010-puppies-03.grid-6x2.jpg"
    alt="Awwww!">
</a>

</body></html>


将两个文件保存到同一目录（但不在系统临时文件夹中），然后Popup_fun.user.js使用 Firefox 的打开菜单 ( CtrlO) 安装 。当您重新加载此页面并单击按钮时，您将看到一个漂亮的格式化弹出窗口。

如果您在某处托管脚本，只需复制PopupPage.htm到同一文件夹即可。安装脚本时会自动安装。

于 2013-07-25T07:08:07.670 回答
0

要以“非混乱”的方式执行此操作，您可以动态加载 css。

这是一个关于如何执行此操作的链接： 如何使用 Javascript 加载 CSS 文件？

于 2013-07-25T05:23:19.193 回答