格式化document.write()的内容

时间:2013-07-25 05:16:43

标签: javascript html greasemonkey

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

提前致谢。

3 个答案:

答案 0 :(得分: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);

答案 1 :(得分: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 ();
}


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复制到同一文件夹即可。它将在安装脚本时自动安装。

答案 2 :(得分:0)

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

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