Question

我有一个textarea框，用户输入HTML并将其输出到iframe的body元素。

使用大多数HTML代码都可以正常使用，但如果您使用<script>代码（为了添加JavaScript），则script元素不会转移到iframe。

例如，我应该可以在textarea中输入以下内容：

<script>
    function test() {
        alert('test');
    }
</script>
<button onclick="test()">test</button>

该按钮已添加到iframe，但由于script元素显然没有，因此点击该按钮不会触发alert()。

解决此问题的方法是在按钮单击时声明alert()，而不是使用预先编写脚本的函数;这种解决方法如下所示：

<button onclick="alert('test')">test</button>

然而，这仅允许一个javascript命令（而用户可能想要使用具有多个命令的函数）。

您可以看到网页here

填充iframe内容的JavaScript是：

(function () {
    $('.grid').height($(window).height());
    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());
            }
        });
    });
})();

Answer 1

问题是任何“用户生成的”脚本都将在父窗口的全局上下文中执行（iframe无法[通常]访问）。单击按钮时控制台显示以下错误，因为test()功能无法在范围内访问iframe：

未捕获的ReferenceError：未定义测试

要解决此问题，脚本需要将函数添加到iframe内部窗口的全局范围：

<script>
(function () {
    'use strict';
    var iframe = document.getElementById('iframe'), //grab the iframe
        win = iframe.contentWindow; //get the window of the iframe
    win.test = function () { //declare function in scope of iframe's window
        alert('test'); //now "test" will fire because it's defined in a scope accessible to the iframe
    };
}());
</script>
<button onclick="test()">test</button>

JavaScript未输入iframe

1 个答案: