一、基本原理
利用Javascript，打开新窗口覆盖当前窗口，或在新标签页中打开新窗口。再将HTML用document.write(code)或$("body").append(code)写入新的窗口中。
1.1 通过JavaScript打开新窗口
- 将下列代码保存为js文件，上传到博客园的文件中。
window.onload = function(){
document.getElementById("#toRun");
code = `<h1>成功打开新窗口~</h1>`; //写入新窗口的HTML代码
let new_window = window.open("","_blank",""); //打开新窗口, _blank参数为新建空白窗口
new_window.document.open("text/html", "replace");
new_window.opener = null;
new_window.document.write(code);
new_window.document.close();
}
- 在博客文章中创建点击的区域
点击的区域是任意的，如，<button>、<a>、<span>、<div>等，样式自己写好就行。
最简单的方法是用<button>绑定事件。
<button type="button" id="toRun">点我打开新窗口</button>
1.2 通过jQuery打开新窗口
如果对jQuery比较熟悉，可以用jQuery来实现。
- 上传写好jQuery代码的js文件到博客园
$(function() {
$("#toRun").click(function() {
code = `<h1>成功打开新窗口~</h1>`;
var newwin = window.open('', "_blank", ''); //新建一个窗口
newwin.document.open('text/html', 'replace');
newwin.opener = null;
newwin.document.write(code);
newwin.document.close();
})
});
- 添加可绑定的区域
<button type="button" id="toRun">点我打开新窗口</button>
1.3 Window.open()参数说明
| 参数 | 说明 | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| URL | 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口 | ||||||||||||||||||||||||||||
| name | 可选。指定target属性或窗口的名称。支持以下值：
|
||||||||||||||||||||||||||||
| specs | 可选。一个逗号分隔的项目列表。支持以下值：
|
||||||||||||||||||||||||||||
| replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
|
#二、具体实现 **上述代码问题**：
通过ID来实现，在同一篇博客中打开的窗口都是相同的，所以改用类名（ClassName）的方式来动态绑定。
2.1 我的动态绑定方式
通过自定义属性来进行一 一对应绑定。
- 代码区域
<textarea class="can_run_html" data-nth-code-area=1 rows="" cols="">
HTML代码...
</textarea>
- 代码对应的按钮
<div><a href="javascript:void 0;" class="run_html" data-nth-code-btn=2>运行</a></div>
<div><button type="button" class="run_html" data-nth-code-btn=2>运行</button></div>
由于我的博客园样式冲突，故在外面包了一层<div>标签。
温馨提示:
按钮的data-nth-code-btn属性值和代码区域的data-nth-code-area属性值必须一一对应！
2.2 JS代码
将代码上传到博客园文件中，并在首页HTML引用。
注意：新上传代码后，记得删除Cookie，否则不起作用！
$(function() {
/**
* @author:Langkye
*
**/
var btn = $(".run_html"); // 或取运行HTML代码的所有按钮
btn.click(function() {
let runCodeNum = parseInt($(this).attr("data-nth-code-btn")); // 为当前can_run_html的代码区域添加按钮并绑定事件
var newwin = window.open('', "_blank", ''); //打开新窗口
newwin.document.open('text/html', 'replace');
newwin.opener = null;
newwin.document.write($(`[data-nth-code-area='${runCodeNum}']`)[0].value); // 将HTML代码输出到新窗口中
newwin.document.close();
});
});
2.3 博客文章代码
<textarea class="can_run_html" data-nth-code-area=1 rows="" cols="">
<h1>Hello Word!</h1>
</textarea>
<button class="run_html" data-nth-code-btn=1 type="button">运行</button>
大功告成~：