在博客文章中运行HTML

一、基本原理

利用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属性或窗口的名称。支持以下值：

• _blank - URL加载到一个新的窗口。这是默认
• _parent - URL加载到父框架
• _self - URL替换当前页面
• _top - URL替换任何可加载的框架集
• name - 窗口名称

specs

可选。一个逗号分隔的项目列表。支持以下值：

channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes|no|1|0	是否显示地址字段.默认值是yes
menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

• true - URL 替换浏览历史中的当前条目。
• false - 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>

大功告成~：

@Author：Langkye<br> 用你的HTML代码替换此处内容~ 如果觉得不错，点击左下角的大拇指，是对我最大的支持 ^_^