将文本框添加到 iframe 并附加到不同的 html答案

【问题标题】：Add textbox into iframe and append in a different html将文本框添加到 iframe 并附加到不同的 html
【发布时间】：2013-11-27 18:29:19
【问题描述】：

是否可以将文本框添加到 iframe 中，并将其附加到 iframe 的 src 中。所以我创建了一个模式框，显示一个按钮供用户单击“添加按钮”

<div id="addFeature" class="openAdd">
        <div>
            <a href="#" title="Close" class="close">X</a>
            <h2>Add...</h2>
            <button class="text" type="button">Text</button>
        </div>
</div>

当用户点击按钮时，我需要关闭模式框并添加一个文本框。以下 iframe 位于 main.html 中。如您所见，iframe 显示另一个 html 页面。

<div>
    <iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
        Your browser does not support Iframes
    </iframe>
</div>

虽然我需要在webpage.html中添加文本框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
    <div id="design">

    </div>
</body>
</html>

JS：

addTextBox() {
    var text = "'<div><input type='textbox'/></div>'"
    var textbox = document.createElement('div');
    textbox.innerHTML = text;
    var addText = document.getElementById('div').src = "webpage.html";
    addText.appendChild(textbox);
}

是否可以按照我的要求进行操作？

【问题讨论】：

是的，这是可能的，只要不违反Same-origin policy。到目前为止，您尝试过什么？

标签： javascript html iframe textbox

【解决方案1】：

恐怕以您现在尝试这样做的方式来解释这一点，将是无尽的沼泽。这里有一些指导方针，你可以很容易地做到这一点。

您可能需要先从iframe 标记中删除onload。然后将这些行放到您的主页：

var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
    document.getElementById('newIframe').src = 'webpage.html';
    textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
    return;
}

当您的对话准备就绪时，请致电 addText()。

然后在webpage.html中，删除body标签中的onload，并将下面的函数添加到<script src="index.js"></script>标签之后的某处。

window.onload = function () {
    var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
        textToAdd = parent.textForIframe;
    // depending on what iFrameOn() does, place it here...
    addTextElement.innerHTML = textToAdd;
    iFrameOn(); // ... or it can be placed here as well 
    return;
};

这些 sn-ps 在iframe 内将新的input type="text" 添加到#design。

【讨论】：

如何使文本框可拖动和调整大小？
嗯...这是一个复杂得多的任务，尤其是对于纯 JavaScript。我认为您应该就此提出一个新问题。
我改变了我的应用程序，而不是使用webpage.html，我有一个在同一个域中操作的iframe。是否仍然可以在此 iframe 中添加文本框？
嗯...就像我在对您的问题的评论中所说的那样，是的，这是可能的。只需使用相关代码发布一个新问题......顺便说一句。如果您在两个月后更改您的应用程序，这不应成为不接受答案的理由，该答案适用于它被回答的应用程序。