Question

$('textarea').on('change keyup paste', function(){

$('#outputFrame').contents().find('html').html("<html><head><style type='text/css'>" + $('#cssArea').val() + "</style></head><body>" + $('#htmlArea').val() + "</body></html>" );

});

<textarea id="htmlArea" placeholder="Enter HTML"></textarea>
<textarea id="cssArea" placeholder="Enter CSS"></textarea>
<iframe id="outputFrame" >
</iframe>

我一直在努力创建一个项目，每当我输入我的HTML和CSS textarea时，该值将显示给iframe。我已经这样做但是有没有其他更简单的方法来编写jquery脚本？感谢。

Answer 1

为什么不尝试单独添加标题和正文，如。

$('textarea').on('change keyup paste', function(){
    $('#outputFrame').contents().find('head').html( "<style type='text/css'>" + $('#cssArea').val() + "</style>" );
    $('#outputFrame').contents().find('body').html( $('#htmlArea').val() );
});

工作实例https://jsfiddle.net/L35bkedk/

Answer 2

这里有一些可以帮到你的东西。该代码段创建了HTML，CSS和JavaScript的实时输入。

这来自Mozilla。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <!-- THE WORK !-->
<script>
 var textarea = document.getElementById('code');
  var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
var output = document.querySelector('.output');
 var code = textarea.value;
var userEntry = textarea.value;

 function updateCode() {
output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = 'Show solution';
updateCode();
});

solution.addEventListener('click', function() {
if(solution.value === 'Show solution') {
textarea.value = solutionEntry;
solution.value = 'Hide solution';
} else {
textarea.value = userEntry;
solution.value = 'Show solution';
}
updateCode();
});


textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and 
// make it write a tab at the caret position instead //

textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}

if (e.keyCode === 27) {
textarea.blur();
}
};

function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;

var front = (textarea.value).substring(0, caretPos);
var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code //

textarea.onkeyup = function(){
// We only want to save the state when the user code is being shown, 
// not the solution, so that solution is not saved over the user code //
if(solution.value === 'Show solution') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}

updateCode();
};
  </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
 <html>
  <body>
    <br>
     <br>
    <br>
   <div class="output-container">
    <h3>Output: <br>__________________________________________________________</h3>
     <div class="output"></div>
    </div>
   <br>
  <br>
   <textarea id="code" class="input"></textarea>
   <br>
    <br>
   <br>
    <br>
   <br>
    <br>
   <br>
   <input id="reset" value="Reset" type="button">
  <input id="solution" value="Show solution" type="button">
 </body>
</html>

Textarea输入显示到iframe Jquery

2 个答案: