Question

我正在尝试创建一个显示文本区域中文本的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。我无法从textarea获取数据。

Answer 1

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

$(".panel").width($((window).width() / 2));

应该是

$(".panel").width($(window).width() / 2);

我无法获得iframe从textarea获取数据

1 个答案: