首页 - 互联网

一个神奇的JS代码，让浏览器在新的空白标签页运行我们 HTML 代码（createObjectURL 的妙用）

作者: 五速梦信息网
时间: 2026年04月20日 04:49

，然后通过 js，将我们的代码框中的 HTML 给输入到<iframe>` 里面，这便是一个简单的在线运行 html 的逻辑。甚至我们可以在一行里写一个在线运行 html 的页面。比如下面这个，一个高度精简的简短的 HTML JS CSS代码：

&lt;body oninput=&#34;i.srcdoc=h.value+&#39;&#39;&#34;&gt;&lt;textarea placeholder=HTML id=h&gt;&lt;/textarea&gt;&lt;textarea placeholder=CSS id=c&gt;&lt;/textarea&gt;&lt;textarea placeholder=JS id=j&gt;&lt;/textarea&gt;&lt;iframe id=i&gt;

如果想运行，很简单，将下面这个代码直接粘贴到浏览器框里，并回车即可：

data:text/html,&lt;body oninput=&#34;i.srcdoc=h.value+&#39;&#39;&#34;&gt;&lt;textarea placeholder=HTML id=h&gt;&lt;/textarea&gt;&lt;textarea placeholder=CSS id=c&gt;&lt;/textarea&gt;&lt;textarea placeholder=JS id=j&gt;&lt;/textarea&gt;&lt;iframe id=i&gt;

效果如下上面三个框分别是 HTML CSS JS 代码，直接通过 i.srcdoc=h.value+' 这样一行 js 便赋予给了 <iframe>，然后就能在线运行我们的前端代码了。原理就是这样，无论是菜鸟教程里的代码运行框，还是大名鼎鼎的 codepen.io 这种代码分享库，其原理都差不多。看，长的一模一样。

问题

但这个时候，就出现了一个问题。我们有可能，不喜欢在一个页面里夹杂着另一个页面，感觉太闷了，如果 HTML 代码是在一个新的页面运行里就好了。其实实现不难，就是有点费资源。渐渐我，我就忘了这个问题。

一个偶然

去年，在改进我制作的一个在某 CMS 平台运行的图片压缩插件的时候，我忘了是从哪里复制过来的一个代码，让我这个插件有了这样一个好功能 : 单击某个按钮可以在新的标签页预览一个图片。至于原程序这里放不下，但我们可以这样体验一下，在 F12 浏览器 JS 控制台输入下面的代码:

const imgurl = &#39;https://assets.cnblogs.com/logo.svg&#39;;  // 博客园的 logo 地址
const imgTempBlob = new Blob([&#39;&lt;img   src=&#34;https://www.cnblogs.com/duyuanshang/p/18829312&#39;+ imgurl +&#39;&#34;&gt;&#39;], {type: &#39;text/html&#39;});
const imgBlobObjurl = window.URL.createObjectURL(imgTempBlob);
window.open(imgBlobObjurl, &#39;_blank&#39;);
URL.revokeObjectURL(imgBlobObjurl);  // 如果不添加这一行，那么那个地址会一直有效，直到浏览器自己清除

然后浏览器会马上打开一个新页面，然后将博客园的 logo 给展示了出来！如图所示：我当时被震惊了。在过去，我对 js 的二进制的理解只有 ArrayBuffer base64 Blob 三者，且这三者是可以互相转化的。直到今天，我才知道在 JS 二进制世界里竟然还有一个 createObjectURL 这样一个方法。 createObjectURL 可以把内存里的一个东西，比如一个字符串、一个图像二进制，等，转换成一个 URL，这样你就可以使用 DOM 渲染出来。比如你加载了一张图片，然后修改了一些内容，接下来要渲染到网页上，就会用到这个函数方法。当然，我们也要注意，每次调用 createObjectURL() 时，都会创建一个新的对象 URL，即使已经为同一个对象创建了一个 URL。当不再需要这些对象时，必须通过调用 URL.revokeObjectURL() 来释放它们，浏览器会在卸载文档时自动释放对象 URL；然而，为了优化性能和内存使用，如果在安全时间内可以明确卸载，就应该卸载。createObjectURL() 创建的 URL 会占用内存，如果不手动释放，可能会导致内存泄漏。这个真是好用，而且用在图片的预览上真的太恰当了！为什么很少见到有人使用它呢？或者说我几乎没在别的地方见过 xxx.com/c533df96-d49e-49af-9a8c-bdbab35b7baf 类似的地址呢？可能是会造成性能上的不妥吧。我后来发觉到里面的 HTML 代码，我感觉它可以再复杂一点。它可以不预览图片，它可以作为 HTML 在线编辑器的最彻底的预览！

预览 HTML 代码

我们可以写一个简单的文本框，然后写一个按钮，让按钮在单击后，在新的页面预览我们的代码运行效果。代码如下:

&lt;textarea   placeholder=&#34;在此输入 HTML 代码&#34;&gt;&lt;/textarea&gt;&lt;br&gt;
&lt;button id=&#34;runcode&#34;&gt;在新窗口预览&lt;/button&gt;

运行效果如下：单击按钮后，很不错。然后我们就可以根据我们自身的需要，为其添加这样的功能！

在写代码的时候，添加保存快捷键，让其保存到我们的浏览器的 localStorage 里，防止丢失代码
设置一个保存按钮
把 CSS 和 JS 也搞里头，单独设置两个框
一键清除记录
简单的把界面给美化一下
可以将当前的页面转化为 HTML 文件下载然后我就搞成了这个样子！大家可以单击这个地址，查看运行效果！我的站点上的一个页面将其嵌入其中了。我感觉真的很实用。我在使用 Gemini 这种对前端输出比较厉害的 AI 的时候，它会给我输出一大堆的 HTML ，有时候还会分 CSS 和 JS 输出，我使用这个页面来辅助测试的话还不错，比类似于 codepen 那种页面好用很多。下面是目前的全部代码，可能还有很多地方要改进的，我之后在使用过程中会进行迭代，并实时更新到我的站点上的那个页面上。

&lt;div style=&#34;width: 600px;max-width: 100%;&#34;&gt;&lt;textarea placeholder=&#34;在此处输入 HTML 代码，单击下面的【运行】，浏览器会新建一个空白标签页运行预览...&#34; name=&#34;code&#34;   class=&#34;code-textarea&#34;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;button   id=&#34;runhtml&#34;&gt;运行&lt;/button&gt;&lt;button     style=&#34;margin-right: 10px;&#34;&gt;下载&lt;/button&gt;&lt;button     style=&#34;margin-right: 10px;&#34;&gt;清空&lt;/button&gt;&lt;button     style=&#34;margin-right: 10px;&#34;&gt;保存&lt;/button&gt;&lt;details&gt;&lt;summary style=&#34;cursor: pointer;background-color: cornsilk;width: fit-content;&#34;&gt;CSS + JS	&lt;div   style=&#34; display: inline; margin-left: 10px; background-color: white; padding-left: 10px; &#34;&gt;&lt;/div&gt;&lt;/summary&gt;CSS &lt;br&gt;&lt;textarea   name=&#34;code&#34; id=&#34;csscode&#34;&gt;&lt;/textarea&gt;&lt;br&gt;JS &lt;br&gt;&lt;textarea   name=&#34;code&#34; id=&#34;jscode&#34;&gt;&lt;/textarea&gt;&lt;/details&gt;
&lt;/div&gt;

</div> <link href=“/planet-markdown.min/planet-markdown.min.css” rel=“stylesheet” /> </div>

            &lt;div class=&#34;alert alert-dark&#34; role=&#34;alert&#34;&gt;本文来自投稿，不代表本站立场，如若转载，请注明出处：http//www.knowhub.vip/share/2/2355&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&#34;shadow-sm p-3 mb-3 bg-white rounded detail-extion&#34;&gt;
            &lt;div class=&#34;row&#34;&gt;
                    &lt;div class=&#34;col-md-6&#34;&gt;
                        &lt;div class=&#34;detail-extion-item&#34; style=&#34;&#34;&gt;
                            &lt;a href=&#34;/share/2/2352&#34;&gt;
                                &lt;div class=&#34;detail-extion-item-title&#34;&gt;
                                    &lt;span class=&#34;text-truncate&#34;&gt;journalctl -u docker日志查看操作指南(查看docker日志)&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class=&#34;detail-extion-item-info&#34;&gt;
                                    &lt;span class=&#34;pull-left&#34;&gt;« 上一篇&lt;/span&gt;
                                    &lt;span class=&#34;pull-right&#34;&gt;04-17&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&#34;col-md-6&#34;&gt;
                        &lt;div class=&#34;detail-extion-item&#34; style=&#34;background-image:url(&amp;#x27;https://cdn.res.knowhub.vip:443//c//2504//19/9609caef?G5wAAORsTinfV7cDvXjGix%2bSBWZnntX6l5NkQkoK6Ho8AJG4gpDbC%2faww%2fnBb7s95qA3FgvH4sgZRFrQ6g0YQ%2bAMgWoFq8kJcvjk7R2rN8ivzVuZBj9lO%2ff%2fVMR%2bKkArWdpYk1eOTlp8XpWpHXnfaOfFmnvyKPNWhtandNvgrzktrMUiIfZbMayQx4sN8uy8wIkU&amp;#x27;)&#34;&gt;
                            &lt;a href=&#34;/share/2/2357&#34;&gt;
                                &lt;div class=&#34;detail-extion-item-title&#34;&gt;
                                    &lt;span class=&#34;text-truncate&#34;&gt;邮件自动回复助手：Rasa与SMTP实现教程&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class=&#34;detail-extion-item-info&#34;&gt;
                                    &lt;span class=&#34;pull-right&#34;&gt;04-18&lt;/span&gt;
                                    &lt;span class=&#34;pull-left&#34;&gt;下一篇  »&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
            &lt;img src=&#34;/Detail/Visits/2355&#34; alt=&#34;&#34; class=&#34;none-img&#34; /&gt;
&lt;/div&gt;
&lt;div class=&#34;col-sm-12 col-md-3&#34; style=&#34;padding:0 5px&#34;&gt;
    &lt;div&gt;

    &lt;li class=&#34;list-group-item list-hot-title font-weight-bold&#34;&gt;热门的技术博文分享&lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3654&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;1&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;ESP实现Web服务器&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3308&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;2&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;从零到一：打造高效的金仓社区 API 集成到 MCP 服务方案&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3166&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;3&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;使用C#构建一个同时问多个LLM并总结的小工具&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2944&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;4&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;.NET 原生驾驭 AI 新基建实战系列Milvus ── 大规模 AI 应用的向量数据库首选&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2452&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;5&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;在Avalonia/C#中使用依赖注入过程记录&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2020&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;6&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt; [设计模式/Java] 设计模式之工厂方法模式&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2002&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;7&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明 &lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/864&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;8&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;SQL 中的各种连接 JOIN 的区别总结！                &lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3018&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;9&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;JavaScript 中防抖和节流的多种实现方式及应用场景&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2697&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;10&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;SaltStack 远程命令执行中文乱码问题&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2673&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;11&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;推荐10个 DeepSeek 神级提示词，建议搜藏起来使用&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2565&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;12&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;C#基础：枚举、数组、类型、函数等解析&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2288&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;13&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;VMware平台的Ubuntu部署完全分布式Hadoop环境&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2155&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;14&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;C# 多项目打包时如何将项目引用转为包依赖 &lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2153&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;15&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;Chrome 135 版本开发者工具（DevTools）更新内容&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/1878&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;16&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;从零创建npm依赖，只需执行一条命令&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3677&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;17&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;关于 Newtonsoft.Json 和 System.Text.Json 混用导致的的序列化不识别的问题&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3424&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;18&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;大模型微调实战之训练数据集准备的艺术与科学&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3277&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;19&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;Windows快速安装MongoDB之Mongo实战&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3114&#34; target=&#34;_blank&#34;&gt;
                    &lt;i&gt;20&lt;/i&gt;
                    &lt;span&gt;.&lt;/span&gt;
                &lt;span&gt;探索 C# 14 新功能：实用特性为编程带来便利&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
&lt;/ul&gt;

</div>

    &lt;div class=&#34;gap&#34;&gt;&lt;/div&gt;
    &lt;div&gt;

    &lt;li class=&#34;list-group-item list-hot-title font-weight-bold&#34;&gt;相关联分享&lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3018&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 中防抖和节流的多种实现方式及应用场景&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3746&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 条件语句中善用 return 让代码更清晰&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3425&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 3 种书写位置及 script 标签的正确存放位置&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3390&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 的各种调试方法&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3964&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 循环结构注意事项&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3699&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 运算符 == 和 === 有什么区别？&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3584&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 数据类型与类型转换&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2355&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;一个神奇的JS代码，让浏览器在新的空白标签页运行我们 HTML 代码（createObjectURL 的妙用）&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3357&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 的应用领域&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/2329&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 单线程原理与异步编程机制&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3850&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 各种对象定义与对象取值方法&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3549&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 变量声明 var、let、const 区别&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3775&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;JavaScript 各种数组定义与数组取值方法&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&#34;list-group-item text-truncate&#34;&gt;
            &lt;a class=&#34;bd-highlight&#34; href=&#34;/share/2/3566&#34; target=&#34;_blank&#34;&gt;
                &lt;span&gt;使用Vite创建一个动态网页的前端项目&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
&lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div> <div class=“row”> </div> </main>

&lt;/div&gt;
&lt;footer class=&#34;border-top footer text-muted&#34;&gt;
&lt;div class=&#34;container&#34;&gt;
    &lt;div&gt;            
        备案号: &lt;a href=&#34;http://beian.miit.gov.cn&#34;&gt;蜀ICP备2023000047号-1&lt;/a&gt; &amp;nbsp;&amp;nbsp;
        联系邮箱: &lt;a href=&#34;mail://524313162@qq.com&#34;&gt;524313162@qq.com&lt;/a&gt; &amp;nbsp;&amp;nbsp;
    &lt;/div&gt;
    &lt;div&gt;
        版权声明: &lt;span&gt;Copyright 2024- 2026 www.knowhub.vip Inc. All Rights Reserved. [knowhub.vip]&lt;/span&gt; &amp;copy; 2026 - &lt;a href=&#34;www.knowhub.vip&#34;&gt;资源笔记 &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

</footer>

&lt;link href=&#34;/lib/bootstrap/dist/css/bootstrap-icons.css&#34; rel=&#34;stylesheet&#34; /&gt;

</body> </html>

一个神奇的JS代码，让浏览器在新的空白标签页运行我们 HTML 代码（createObjectURL 的妙用）

问题

一个偶然

预览 HTML 代码

相关文章

一个开源、经典的 WPF 控件、组件和实用工具集合，值得参考学习！

一段简单的PHP后门代码，什么都能干

一次循环引用导致的内存泄漏分析，重新认识JavaScript

一鼓作气再而衰三而竭的意思(一鼓作气再而衰三而竭的出处)

一键搭建家庭影音库！Docker部署小雅全家桶

一款 .NET 开源、免费、轻量级且非侵入性的防火墙软件

龟头颜色发白是正常的吗

龟头有红斑不痛也不痒

齐立强医生预约挂号出诊时间

鼻血管瘤的原因是什么

鼻血管瘤有没有可能是恶性

鼻血管瘤是什么引起的原因

测试文章2

测试文章1