Question

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

My 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。我想在那里放一张桌子，给文字添加样式，把图片放进去等等。有没有一种非混乱的方法可以做到这一点吗？

提前致谢。

Answer 1

您可以使用现有的行创建此内容：

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

将您的HTML倾注到“Hello world is current”

OR

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

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

然后

追加到窗口对象。

myWindow.appendChild(d);

Answer 2

聪明而容易的事情是使用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 ();
}

PopupPage.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>

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

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

Answer 3

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

以下是有关如何执行此操作的链接： How to load up CSS files using Javascript?

格式化document.write（）的内容

3 个答案: