Javascript 我能'；t获取iframe以从textarea获取数据_Javascript_Jquery_Html

Javascript 我能'；t获取iframe以从textarea获取数据

javascript jquery html

Javascript 我能'；t获取iframe以从textarea获取数据,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试制作一个iframe，它显示放置在文本区域中的文本我该怎么做？我是不是遗漏了什么 <html> <head> <title>Code Player</title> <script type="text/javascript" src="jquery.min.js"></script>  <sty

我正在尝试制作一个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>


代码播放器
身体{
字体系列：无衬线；
保证金：0；
填充：0；
}
#标题{
宽度：100%；
背景色：#EEEEEE；
填充物：5px；
高度：30px；
}
#标志{
浮动：左；
字体大小：粗体；
字体大小：120%；
填充物：3px 5px；
}
#钮扣容器{
宽度：240px；
保证金：0自动；
}
.切换按钮{
浮动：左；
边框：1px纯色灰色；
填充：6px；
边界权：无；
字体大小：90%；
}
#html{
边框左上半径：4px；
边框左下半径：4px；
}
#输出{
边框右上角半径：4px；
边框右下半径：4px；
右边框：1px纯色灰色；
}
.主动{
背景色：#E8F2FF；
}
.高亮显示按钮{
背景颜色：灰色；
}
文本区{
调整大小：无；
边界顶部：无；
边框颜色：灰色；
}
.小组{
浮动：左；
宽度：49%；
左边界：无；
}
iframe{
边界：无；
}
代码播放器
HTML
CSS
JavaScript
输出
你好，世界！
$（“.toggleButton”）.hover（函数（）{
$（this.addClass（“highlightedButton”）；
}，函数（）{
$（此）.removeClass（“highlightedButton”）；
});
$（“.toggleButton”）。单击（函数（）{
$（此）.toggleClass（“活动”）；
$（此）.removeClass（“highlightedButton”）；
});
$（“.panel”）.height（$（window.height（）-$（“#header”）.height（）-15）；
$（“.panel”）.width（$（（window.width（）/2））；
$（“iframe”）.contents（）.find（“html”）.html（$（“#htmlPanel”）.val（））；
$（“textarea”）。在（'change keyup paste'，function（）上{
$（“iframe”）.contents（）.find（“html”）.html（$（“#htmlPanel”）.val（））；
});

除了iframe之外，这段代码中的所有内容都可以正常工作。我无法从textarea获取数据。

您有语法错误，否则它可以正常工作

$（“.panel”）.width（$（（window.width（）/2））
应该是
$（“.panel”）.width（$（window.width（）/2）