请问如何用iframe标签实现同步展示一个输入框内代码效果？
如上图所示，小弟想实现一个效果，就是在左侧输入HTML代码，右侧会同步展示出代码效果。
我看很多网站都是用iframe标签来实现的，可我把取出来的代码文本通过jquery的html()、val()、text()等方法赋值给iframe标签，却一直无法实现，哪位大神能帮帮我呀！
淡淡的月饼浏览 1937回答 3
3回答
-
幕布斯7574896
你的思路没问题，监听输入事件，然后将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
这个要用到JS，设置两个文本框的id，然后来一个获取id并让它们的值相等：document.getElementById('i1').value=document.getElementById('i2').value;
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery