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>");

「Hello world is currently」にHTMLを注ぐことによって

また

以下を使用して DOM 要素を作成します。

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

次に、window オブジェクトに追加します。

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

スマートで簡単なのは、GM_getResourceText()Docを使用することです。

そうすれば、ポップアップ ページを簡単な方法で作成し、GM スクリプトと同じようにページをローカルにロードし、スマート ポップアップに 3 行の簡単なコードを入力するだけです。

たとえば、次のように 2 つのファイルを作成します。

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>


両方のファイルを同じディレクトリに保存し (ただし、システムの一時フォルダーには保存しません)、Popup_fun.user.jsFirefox の[開く] メニュー ( CtrlO) を使用して をインストールします。このページをリロードしてボタンをクリックすると、書式設定された素敵なポップアップが表示されます。

スクリプトをどこかにホストしている場合はPopupPage.htm、同じフォルダーにコピーするだけです。スクリプトのインストール時に自動的にインストールされます。

于 2013-07-25T07:08:07.670 に答える
0

これを「乱雑ではない」方法で行うには、css を動的にロードできます。

これを行う方法に関するリンクは次のとおり です。Javascriptを使用してCSSファイルをロードする方法は?

于 2013-07-25T05:23:19.193 に答える