Question

我正在尝试在keyup上写入我的iframe，但它没有更新。我将运行我正在使用的代码来尝试实现此目的。

首先，我抓住iframe上的原始HTML（通过AJAX）并将其写入iframe：

var base_tpl = base_html; //get base template html.
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(base_tpl);
iframe_doc.close();

之后我将document.querySelector附加到相关文本区域，这些文本区域将作为我想要显示在iframe中相应元素上的更改的输入。我是这样做的：

var the_title = document.querySelector('#the_title2 textarea'),
    the_subheading = document.querySelector('#the_subheading2 textarea'),
    the_image_url = document.querySelector('#the_image_url2 textarea'),
    the_description = document.querySelector('#the_description2 textarea'),
    the_signup_button_text = document.querySelector('#the_signup_button_text2 textarea'),
    the_email_capture_text = document.querySelector('#the_email_capture_text2 textarea'),
    the_email_capture_button_text = document.querySelector('#the_email_capture_button_text2 textarea');
the_css = document.querySelector('#the_css2 textarea');
var editors = [the_title, the_subheading, the_image_url, the_description, the_signup_button_text, the_email_capture_text, the_email_capture_button_text];

然后我将这些附加到keyup侦听器上：

// Attaching the onkeyup Event
editors.forEach(function(editor, i, arr) {

    editor.addEventListener('keyup', function() {

        // The function that'll prepare the code and inject
        // into the iframe.
        //alert(the_title.value);

        render();

    }, false);

});

注意渲染功能，它的工作方式如下：

var render = function() {
    var source = prepareSource();

    var iframe = document.querySelector('#output iframe'),
        iframe_doc = iframe.contentDocument;
    console.log(source);
    iframe_doc.open();
    iframe_doc.write(source);
    iframe_doc.close();
};

准备源是将新输入的元素组合在一起的功能。它背后的方法可以在这里看到：

var prepareSource = function() {
    var title = the_title.value,
        subheading = the_subheading.value,
        image_url = the_image_url.value,
        description = the_subheading.value,
        signup_button_text = the_image_url.value,
        email_capture_text = the_subheading.value,
        email_capture_button_text = the_image_url.value,
        css = the_css.value,
        src = '';

    src = base_tpl;
    // Title
    src = src.replace("<div id='the_title'><h3><?php echo $page->title; ?></h3></div>", "<div id='the_title'><h3>" + title + "</h3></div>");
    // Subheading
    src = src.replace("<div id='the_subheading'><h3><?php echo $page->subheading; ?></h3></div>", "<div id='the_subheading'><h3>" + subheading + "</h3></div>");
    // Image URL
    src = src.replace("<div id='the_image_url'><h3>", image_url + "</h3></div>");
    // Description
    src = src.replace("<div id='the_description'><h3>", description + "</h3></div>");
    // Signup Button Text
    src = src.replace("<div id='the_signup_button_text'><h3>", signup_button_text + "</h3></div>");
    // Email Capture Text
    src = src.replace("<div id='the_email_capture_text'><h3>", email_capture_text + "</h3></div>");
    // Email Capture Button Text
    src = src.replace("<div id='the_email_capture_button_text'><h3>", email_capture_button_text + "</h3></div>");

    // CSS
    css = '<style>' + css + '</style>';
    src = src.replace('</head>', css + '</head>');

    return src;
};

我的问题是我在这里做错了什么。主要问题是准备好的来源似乎根本不起作用。密钥上的iframe没有任何变化。我用console.log测试了这个。它似乎根本没有受到影响。

我很感激这里的任何帮助。

干杯！

Tapha。

编辑：请忽略准备好的来源＆＃39;中的副标题后的元素。部分 - 我只是为了测试目的而完成了标题和副标题部分。

试图在keyup上写入iframe

0 个答案: