原创

一个供前端测试用https环境


运行字符串代码

首先我们要实现的是,将下面代码放入html中,且让他执行js

var htmlStr = `<div onclick='fn()'>零三</div><script>alert(123);function fn(){alert('web03.cn')}<\/script>`

innerHtml 不采用

document.body.innerHTML = htmlStr

这样直接innerHtml的话,html与script都会在页面上,但是javascript是不会执行的

如果要让innerHtml执行JavaScript,则需要使用行内的写法,如果采用这种写法,则需要把js标签内的内容提取出来...

详见mdn https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML

eval 不采用

eval与innerHtml的行内写法相差不大,也是要将js提取出来,可以直接截取script标签还可以使用

document.getElementsByTagName('script')[0].innerText

提取出来使用eval或者生成标签写行内script,也是可行的

eval详见mdn https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval

document.write 不采用

此方法可以在页面上直接输出任何html内容,script标签也会执行,但需要将它放入到指定容器中的的时候,需要先获取当前html,将htmlStr插入到文档中,再调用document.write

document.write(htmlStr)

jQuery的html() 采用√

$('#box').html(htmlStr);

上面的方法说来说去,都不如jQuery简单,因为jQuery的html()方法内部已经做了处理,如果参数中含有script标签,内部会使用eval和创建新节点的方式进行处理,如果是外联的js文件,jQuery会发一个同步的ajax请求来获取代码,注意,是同步的!所以不论是内联的js代码还是外联的js文件,都可以正常执行,同时在执行完后删去script标签。

如何使用https环境

iframe通信-发送

<iframe src="https://web03.cn/utils/https_context" id="iframe"></iframe>
let iframe = document.getElementById('iframe')
        iframe.contentWindow.postMessage({
            useWeb03: true,//必填
            addContext: false,//是否追加代码
            html: '',//HTML字符串
			js: '',//js字符串
        }, "https://web03.cn/utils/https_context");

iframe通信-接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>https环境</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background: #f0f0f0;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="context"></div>
</body>
<script src="https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/cdn/jquery.min.js"></script>
<script>
    console.log('%c使用方法 https://web03.cn/blog/261', 'font-size:12px;color:red;');
    const context = $('#context')
    window.addEventListener('message', function (e) {
        var data = e.data
        if (typeof data === "object" && data.useWeb03) {
            if (data.html) {
                if (data.addContext) {
                    context.html(context.html() + data.html);
                } else {
                    context.html(data.html)
                }
            }
            if (data.js){
                eval(data.js)
            }
        }
    })
</script>
</html>

为什么要使用这个工具?

在很多html5新特性中,如 通知Notified、PublicKeyCredential等等,jsApi都要在https环境下才能调用,通常情况下我们会直接找一个https的网站打开f12控制台,将代码粘贴上去运行,但这样极为不方便,每次都要将修改后的代码粘贴进去很不方便,这个工具只需要通过js获取本地写的代码,直接发送给iframe即可预览

此功能主要是为了方便自己,大家都可免费使用,有疑问可以进群交流

如何使用,就是【iframe通信-发送】的代码

例子

实现Notification https://web03.cn/blog/244

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<iframe src="https://web03.cn/utils/https_context" id="iframe"></iframe>
<button id="btn1">有https环境</button>
<button id="btn2">没有有https环境</button>
</body>
<script>

    var htmlStr = `
if(window.Notification && Notification.permission !== "denied") {
        console.log('有https环境')
        Notification.requestPermission(function(status) {
            var n = new Notification('通知标题', { body: '这里是通知内容!' });
        });
    } else {
        console.log('没有https环境')
    }
`
    document.getElementById('btn1').onclick = function () {
        let iframe = document.getElementById('iframe')
        iframe.contentWindow.postMessage({
            useWeb03: true,
            addContext: false,
            js: htmlStr,
        }, "https://web03.cn/utils/https_context");
    }
    
    document.getElementById('btn2').onclick = function () {
        if(window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function(status) {
                var n = new Notification('通知标题', { body: '这里是通知内容!' });
            });
        }
    }
</script>
</html>

Demo地址:https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/demo/https_context_test.html

演示的demo也在我https服务器内,为了达到效果请将文件下载到本地预览效果

JavaScript
工具
  • 作者:零三(联系作者)
  • 最后更新时间:2021-07-10 16:23
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn
  • 评论