Question

是否可以将文本框添加到同一域的iframe中。所以我创建了一个按钮供用户点击。

<button id="text" onclick="addTextBox()">Text</button>

当用户点击按钮时，我需要在iframe中添加一个文本框。

<iframe id="iframeDiv" class="section"></iframe>

我试过这个

JS：

function addTextBox() {

    var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"></textarea></div>';

    var iframe = document.getElementById('iframeDiv'),
        iframe.innerHTML += parent.text;

    $('div').draggable({
        cancel: "textbox",
        start: function () {
            $('#textbox').focus();
        },
        stop: function () {
            $('#textbox').focus();
        }
    });

}

window.onload = function () {
    addTextBox();

    return;
}

我也做了一个小提琴：JSFiddle

我还想了解如何将文本标记附加到DOM结构

Answer 1

您可以使用document.createElement创建元素或使用jQuery以更简单的方式创建元素。并使用iframe.contentWindow.document.body.appendChild来拥有多个元素

     function addTextBox() {    
        var text = document.createElement('textarea'),
        iframe = document.getElementById('iframeDiv');
        text.setAttribute('id', 'textbox');

        iframe.contentWindow.document.body.appendChild(text);    
     }

或者您也可以这样做：

    function addTextBox() {    
        var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"> </textarea></div>',
        iframe = document.getElementById('iframeDiv');
        iframe.contentWindow.document.body.innerHTML = text;    
    }

Answer 2

试试这个

 var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"></textarea></div>';
    var iframe = document.getElementById('iframeDiv');
iframe .src = "data:text/html;charset=utf-8," + escape(text);

请参阅Fiddle

使用javascript单击按钮添加文本框

2 个答案: