0

我有一个textarea框，用户在其中输入 HTML，然后输出到iframe.

这在使用大多数 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 命令（而用户可能希望使用具有多个命令的函数）。

你可以在这里看到网页

填充 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());
            }
        });
    });
})();
4

1 回答 1

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>
于 2013-07-01T01:52:15.550 回答