HTML网页代码实时效果预览器

学习&实践爱好者

已于 2025-03-27 07:38:41 修改

阅读量652

点赞数 4

分类专栏： JavaScrip技术 HTML5与CSS3 前端开发文章标签： html 前端

于 2025-03-22 21:45:00 首次发布

本文链接：https://blog.youkuaiyun.com/cnds123/article/details/146296756

版权

JavaScrip技术同时被 3 个专栏收录

149 篇文章

订阅专栏

HTML5与CSS3

98 篇文章

订阅专栏

前端开发

75 篇文章

订阅专栏

HTML网页代码实时效果预览器

可以用于学习和实验HTML和CSS，实时效果预览，比较便捷。源码参考自网络。

功能

实时预览：当你在左侧的“代码编辑器”中输入代码时，右侧的“预览窗口”会实时显示你的网页效果（注意，不能体现嵌入的JavaScript运行效果）。

清空代码：如果你想要重新开始，只需点击页脚的“清空代码”按钮。

屏显切换：想要更大的编辑空间？点击“屏显切换”，如果你想要退出全屏模式，只需再次点击“屏显切换”或者使用浏览器的全屏退出功能。

下面给出一段输入测试代码（你当然可以输入其它网页代码试试）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
<style>
body {
margin: 0;
padding: 20px;
color: red;
}
.container {
width: 100%;
}
</style>
</head>
<body>
<div>
<p>测试</p>
<img src="test.png" />

<ul>

<li>项目1</li>
<li>项目2</li>
</ul>
</div>

运行效果

这个HTML网页代码预览器，由两个文件组成（请将两个文件在同一个文件夹中）：

(1)html文件源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>HTML网页代码预览器</title>
    <link rel="stylesheet" href="./normalize.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            height: 100vh;
            background-color: #f4f4f9;
        }
        header {
            background-color: #6a1b9a;
            color: white;
            text-align: center;
            padding: 1em 0;
            position: fixed;
            width: 100%;
            z-index: 1000;
        }
        main {
            display: flex;
            width: 100%;
            margin-top: 5em;
            padding: 1em;
        }
        .code-editor {
            width: 50%;
            height: calc(100vh - 12em);
            padding: 1em;
            font-size: 16px;
            resize: none;
            overflow-y: auto;
            tab-size: 4;
            background-color: #fff;
            border: 1px solid #ddd;
            outline: none;
            border-radius: 5px;
        }
        .preview-window {
            width: 50%;
            height: calc(100vh - 12em);
            border: 1px solid #ddd;
            background-color: #fff;
            border-radius: 5px;
            margin-left: 1em;
        }
        footer {
            background-color: #6a1b9a;
            color: white;
            text-align: center;
            padding: 0.5em 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        button {
            margin: 0 0.5em;
            padding: 0.5em 1em;
            cursor: pointer;
            background-color: #ffab91;
            border: none;
            border-radius: 5px;
            color: white;
        }
        button:hover {
            background-color: #ef5350;
        }
        .toast {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 0.5em 1em;
            border-radius: 5px;
            z-index: 1001;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .design-by {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML网页代码预览器</h1>
    </header>
    <main>
        <textarea id="codeEditor" class="code-editor" placeholder="在此处编写您的HTML代码..."></textarea>
        <iframe id="previewWindow" class="preview-window"></iframe>
    </main>
    <footer>
        <button aria-label="清空代码" onclick="clearCode()">清空代码</button>
        <button aria-label="屏显切换" onclick="toggleFullScreen()">屏显切换</button>
    </footer>
    <div id="toast" class="toast"></div>
    <div class="design-by">设计：</div>
 
    <script>
        (function() {
            const codeEditor = document.getElementById('codeEditor');
            const previewWindow = document.getElementById('previewWindow').contentDocument.body;
            const toast = document.getElementById('toast');
 
            // 将函数挂载到window对象
            window.clearCode = clearCode;
            window.toggleFullScreen = toggleFullScreen;

            function showToast(message) {
                toast.textContent = message;
                toast.style.opacity = 1;
                setTimeout(() => {
                    toast.style.opacity = 0;
                }, 3000);
            }
 
            function updatePreview() {
                try {
                    previewWindow.innerHTML = codeEditor.value;
                } catch (error) {
                    console.error("预览更新时出错:", error);
                    showToast("预览更新时出错，请检查代码！");
                }
            }
 
            function clearCode() {
                codeEditor.value = '';
                updatePreview();
                showToast("代码已清空！");
            }
 
 
            function toggleFullScreen() {
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen().catch(err => {
                        console.error(`启用全屏模式时出错: ${err.message} (${err.name})`);
                        showToast("启用全屏模式时出错！");
                    });
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                }
            }
 
            codeEditor.addEventListener('input', () => {
                updatePreview();
            });
 
            window.onload = () => {
                updatePreview();
            };
        })();
    </script>
</body>
</html>

(2) normalize.css文件

上面的html文件用到的normalize.css文件，内容如下：

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace,monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,strong {
	font-weight: bolder
}

code,kbd,samp {
	font-family: monospace,monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,input {
	overflow: visible
}

button,select {
	text-transform: none
}[type=button],[type=reset],[type=submit],button {
	-webkit-appearance: button
}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
	border-style: none;
	padding: 0
}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}[type=checkbox],[type=radio] {
	box-sizing: border-box;
	padding: 0
}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height: auto
}[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}[hidden],template {
	display: none
}

请按前面所说将两个文件在同一个文件夹中。现在，你可以用浏览器打开html文件，输入测试代码试试了。