IFrame实现HTML代码调试效果

最新推荐文章于 2024-06-14 14:55:48 发布

Quincylk

最新推荐文章于 2024-06-14 14:55:48 发布

阅读量2.4k

点赞数 1

分类专栏： HTML5 文章标签： HTML5 IFrame

本文链接：https://blog.csdn.net/Quincylk/article/details/52877867

版权

在w3c school上学习HTML时，经常能看到提交HTML代码，右边窗口显示结果的页面。经调试相关页面，发现是用IFrame实现的。下面代码是一个简单的实现：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>IFrame实现HTML调试效果</title> 
</head>
<script>
    function run(){
        document.getElementById("iframe1").srcdoc = document.getElementById("ta1").value;
   }
</script>
<body>
    <div style="width: 100%; height: 24px">
        <div style="width: 50%; height: 24px; padding-left: 20px; float: left; box-sizing: border-box;">
            <div style="float: left">源代码：</div>
            <button  οnclick="run()" style="float: right; border: 1px solid #333; box-sizing: border-box">提交运行>></button>
        </div>
        <div style="width: 50%; height: 24

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Quincylk

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
IFrame实现HTML代码调试效果

在w3c school上学习HTML时，经常能看到提交HTML代码，右边窗口显示结果的页面。经调试相关页面，发现是用IFrame实现的。下面代码是一个简单的实现： IFrame实现HTML调试效果 function run(){ document.getElementById("iframe1").srcdoc = document.getElem
复制链接

扫一扫