如上图所示，小弟想实现一个效果，就是在左侧输入HTML代码，右侧会同步展示出代码效果。我看很多网站都是用iframe标签来实现的，可我把取出来的代码文本通过jquery的html()、val()、text()等方法赋值给iframe标签，却一直无法实现，哪位大神能帮帮我呀！
3 回答
幕布斯7574896
TA贡献38条经验 获得超3个赞
你的思路没问题，监听输入事件，然后将iframe拼接代码即可，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习</title>
<style type="text/css">
#codeArea{
width:500px;
height:500px;
float:left;
border:1px solid red;
}
#resultArea{
width:100%;
height:500px;
border:1px solid green;
}
#result{
margin-left:520px;
}
</style>
</head>
<body>
<div id="code">
<textarea id="codeArea">登录</textarea>
</div>
<div id="result">
<iframe id="resultArea"> </iframe>
</div>
<script type="text/javascript">
var codeArea = document.getElementById("codeArea");
var resultArea = document.getElementById("resultArea");
codeArea.oninput = function(){
resultArea.contentWindow.document.body.innerHTML = codeArea.value;
}
</script>
</body>
</html>
o_n
TA贡献56条经验 获得超20个赞
这个要用到JS，设置两个文本框的id，然后来一个获取id并让它们的值相等：document.getElementById('i1').value=document.getElementById('i2').value;
添加回答
举报
0/150
提交
取消