当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

浏览器html代码快速预览小工具

教程管理员 发布于2023-09-30 14:12 HTML教程 161

简介: 我们常常在给简书或其他网站查看别人写的html代码时想快速预览下效果,一般都是在桌面创建个** .html*文件然后将网上的html代码复制粘贴进去,最后用浏览器打开预览。

我们常常在给简书或其他网站查看别人写的html代码时想快速预览下效果,一般都是在桌面创建个** .html*文件然后将网上的html代码复制粘贴进去,最后用浏览器打开预览。当然也有小伙伴喜欢用在线工具进行运行查看。今天我分享两个很简单的html效果预览工具

直接弹出预览:

javascript:(function() { 
    var blob = new Blob([window.getSelection().toString()],{type:"text/html"});   
    window.open(URL.createObjectURL(blob)); 
})()

快速保存到本地:

javascript: (function() {  
    var blob = new Blob([window.getSelection().toString()],{type:"text/html"});  
    var a=document.createElement("a");
    a.href=URL.createObjectURL(blob);
    a.download=document.title;
    a.click();
})()

使用教程:

在任意网页点击收藏:


img_bac736fa0c98147d5bab93bf7a69e01d.png 在任意网页点击收藏

然后点击修改:


img_ddf30948006e2ad451c4c42e439dabaf.png 然后点击修改

输入收藏名称与网址,网址为以上或其他脚本:


img_b6be2b53d49fd4b5685a62a7ec7d788c.png 输入收藏名称与网址,网址为以上或其他脚本

使用


img_53ad6e75350d005c05b635a7cc084899.png 使用

琼ICP备09004296号-12