-1
テキストエリアに配置されたテキストを表示するiframeを作成しようとしています。テキストエリアからデータを取得するiframeを取得できません
どうすればいいですか？私はここに何かを逃していますか
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width()/2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
このコードの作業には、すべてiframeが必要です。テキストエリアからデータを取得できません。
感謝する必要があります –