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