Formatting Content of document.write()

Question

I am making a GreaseMonkey script that sticks a button on a page. When this button is clicked, it pulls up a new page. Ideally, I'd like to be able to format this page like a regular HTML page. The constraint I have is that I can't make a new HTML file. Everything that is generated needs to come from this GreaseMonkey script.

My GreaseMonkey sticks this code in the body of the original page

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

which calls this function when clicked:

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

I'd like to put more than just Hello World in this new window that opens up. I would like to put a table in there, style the text, put pictures in it, etc. Is there a non-messy way to do this?

Thanks in advance.

score 1 · Answer 1 · answered Jul 25 '13 at 05:26

You can either create this using the already existing line:

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

by pouring your HTML where the "Hello world is currently"

OR

you create DOM elements using:

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

then append to the window object.

myWindow.appendChild(d);

score 1 · Accepted Answer · answered Jul 25 '13 at 07:08

The smart and easy thing to do is to use GM_getResourceText()^Doc.

That way, you just make your popup page the easy way, the page loads locally, just like your GM script, and you populate your smart popup with 3 easy lines of code.

For example, create two files as follows:

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>

Save both files to the same directory (but not in the system temp folder), and install Popup_fun.user.js, using Firefox's Open menu (CtrlO). When you reload this page and click the button, you will see a nice, formatted popup.

If you host your script somewhere, merely copy PopupPage.htm to the same folder. It will be installed automatically when your script is installed.

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

To do this the "non-messy" way, you can load the css dynamically.

Here's a link on how to do this: How to load up CSS files using Javascript?

edited May 23 '17 at 12:03

Community

1
1

answered Jul 25 '13 at 05:23

rfk

123
6

Formatting Content of document.write()

3 Answers3