在线实时编译运行html_html在线运行-CSDN博客

本文链接：https://blog.csdn.net/ljcc122/article/details/113189943

这篇博客介绍了如何在线实时编译并运行HTML，包括使用Blob对象和URL.createObjectURL创建URL，利用document.initMouseEvent初始化鼠标事件，以及设置HTML禁用右键和选择的功能。此外，还探讨了window.open方法用于打开新窗口或已有窗口的特性，并提供了详细参数说明。

摘要由CSDN通过智能技术生成

实时编译运行html

效果：
代码：
问题汇总

效果：

在这里插入图片描述

代码：

可跳过代码直达问题汇总

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>在线HTML</title>
	</head>
	<body>
		<style>
			html{
    
				height: 100%; padding: 0; margin: 0;
			}
			body{
    
				height: 100%;
				padding: 0;
				margin: 0;
				/* h5页面禁止复制以及禁止右键 */
				-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
				-webkit-user-select:none; /*webkit浏览器*/
				-khtml-user-select:none; /*早期浏览器*/
				-moz-user-select:none; /*火狐*/
				-ms-user-select:none;  /*IE10*/
				user-select:none;
			}
			.content{
    
				display: flex;
				flex-direction: column;
				height: calc(100% - 45px);
				padding: 0;
				margin: 0;
			}
			textarea{
    
				padding: 10px;
				resize: none;
				width: calc( 100% - 20px ); 
				margin: 0;
				border: 0;
			}
			textarea:focus{
    
				/* 文本域 获取焦点后的样式 */
				/* outline: none; */
			}
			iframe{
    
				margin: 0; border: 0;
				height: 50%; border-top: 1px solid red;
			}
			.content #edit{
    
				height: 50%; display: flex;
    			flex-direction: initial;
			}
			.content #editHtml{
    
				border-right: 1px solid red;
			}
			.controls{
    
				border-top   : 1px solid #808080;
				border-bottom: 1px solid #808080;