如何在带有“节”的输出中显示代码编辑器HTML;页面滚动从html

how to display code editor html in output with "section" page scroll from html

本文关键字：HTML 编辑器 代码 html 滚动 显示 输出      更新时间：2023-09-26

这里是我的代码编辑器HTML 

<div class="codecontainer" id="htmlContainer" style="max-width:30%;">
     <span class="containerTitle">HTML</span>
     <textarea class="code" id="html">
     </textarea>
</div>

和函数调用在运行按钮点击

$("#run").click(function() {
    $('#resultFrame').contents().find('html').html("<style>" + $('#css').val() + "</style>" + $("#html").val());
    document.getElementById('resultFrame').contentWindow.eval($('#js').val());
});

如何使用?

你的问题不是解释性的，在一些假设的问题上，我已经为你创造了一个解决方案…

所以下面的代码将从文本区域运行HTML输入，并在iframe ..中输出。

<div class="codecontainer" id="htmlContainer" style="max-width:30%;">
     <span class="containerTitle">HTML</span>
     <textarea class="code" id="html"></textarea>
    <button type="button" id="run">Run</button>
</div>
<iframe id='resultFrame'></iframe>

JS 

$("#run").click(function() 
{
$('#resultFrame').contents().find('body')
.html("<style>" + $('#css').val() + "</style>" + $("#html").val());
document.getElementById('resultFrame').contentWindow.eval($('#js').val());
});

http://jsfiddle.net/mailmerohit5/8y0yctn3/

相关文章：