格式化document.write（）的內容

我正在製作一個GreaseMonkey腳本，它在頁面上粘貼一個按鈕。當點擊這個按鈕時，它會拉起一個新的頁面。理想情況下，我希望能夠像常規HTML頁面一樣格式化此頁面。我擁有的約束是我無法創建一個新的HTML文件。所有生成的內容都需要來自GreaseMonkey腳本。格式化document.write（）的內容

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

我想放的不僅僅是世界您好更多在於此：點擊時

我的GreaseMonkey堅持在原來的頁面

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

調用該函數的身體這個代碼打開新窗口。我想在那裏放一張桌子，放置文字，放入圖片等。有沒有一種非雜亂的方式來做到這一點？

在此先感謝。

來源

2013-07-25 Yuna Wu

聰明和容易的事情是使用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>

保存這兩個文件在同一目錄下（而不是在系統臨時文件夾），並安裝Popup_fun.user.js，使用Firefox的開放菜單（按CtrlØ）。當您重新加載此頁面並單擊該按鈕時，您將看到一個不錯的格式化彈出窗口。

如果您將腳本託管在某處，只需將PopupPage.htm複製到同一文件夾。它會在你的腳本安裝時自動安裝。

來源

2013-07-25 07:08:07

這是如此弧度。非常感謝！ –

不客氣，樂意效勞！ –

要做到這一點「非雜亂」的方式，您可以動態加載CSS。

下面是關於如何做到這一點的鏈接： How to load up CSS files using Javascript?

來源

2013-07-25 05:23:19 rfk

您可以創建這個使用已經存在的線：

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-25 05:26:11

格式化document.write（）的內容

回答

相關問題