Question

我试图制作一个简单的html编辑器，但它无法正常工作。它应该显示每次按键时在iframe中输入的所有HTML和CSS，但事实并非如此这是我的代码

    <script src="jquery-1.11.0.min.js"></script>
    <script>
        (function() {
            var frame = $('iframe'),
                contents = frame.contents(),
                body = contents.find('body'),
                styleTag = contents
                    .find('head')
                    .append('<style></style>')
                    .children('style');

            $('textarea').focus(function() {
                var $this = $(this);
                $this.keyup(function() {
                    if ( $this.attr('id') == 'html') {
                        body.html( $this.val() );
                    } else {
                        styleTag.text( $this.val() );
                    }
                });
            });
        }) ();
    </script>
<body>
    <textarea id="html"></textarea>
    <textarea id="css"></textarea>
    <iframe id="iframe"></iframe>
</body>

Answer 1

AFAIK，你无法看到iframe里面的内容。 iframe内容无法与外部页面的内容进行交互。 //编辑：以前适用于iframe来自不同的域（感谢视频。）

您的脚本应在要解析的DOM之后声明。否则你应该使用$ .ready（）来确保在执行你的函数时页面被完全加载。 Yu正在定义在这些元素实际存在之前尝试查找DOM元素的函数。

这有效：

<script>
    $(document).ready(function() {  // <----- 'cause of $().ready()
        var frame = $('iframe'),
            contents = frame.contents(),
            body = contents.find('body'),
            styleTag = contents
                .find('head')
                .append('<style></style>')
                .children('style');

        $('textarea').focus(function() {
            var $this = $(this);
            $this.change(function() {
                if ( $this.attr('id') == 'html') {
                    body.html( $this.val() );
                } else {
                    styleTag.text( $this.val() );
                }
            });
        });
    });
</script>

jQuery live html编辑器无法正常工作？

1 个答案: