Question

下午好。

<iframe width="550" id="iframe1" height="350" scrolling="no" src="blah.com/iframe.html"></iframe>

<script type="text/javascript">
    function insertTxt() {
        var textstring = "";
        parent.iframe1.document.getElementsByTagName("input")[0].value = textstring;
    }
</script>

<a href="#" onclick="insertTxt();">test 1</a>
<a href="#" onclick="insertTxt();">test 2</a>
<a href="#" onclick="insertTxt();">test 3</a>
<a href="#" onclick="insertTxt();">test 4</a>

在iframe中加载的页面有1个输入字段但没有要锁定的ID。我一直在寻找解决方案来实现这一目标。我正在尝试将文本“test 1”或“test 2”等插入到iframe中的此输入字段中。

在iframe文件中，这是输入字段html。

<input type="text" autocomplete="off" spellcheck="true" maxlength="361" style="width: 100%; padding: 0px; border: 0px; margin: 0px; outline: 0px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 15px;">

如果有人能帮我解决上述问题。

非常感谢。

Answer 1

首先，您要将空白字符串分配给变量文本字符串，其次，如果您在没有网络服务器的情况下进行操作，则它将无效（您将在控制台中收到错误Uncaught DOMException。）

按照以下步骤使其正常工作

使用网络服务器
在iframe上添加name="iframe1"
HTML - <a href="#" onclick="insertTxt(this);">test 1</a>

将您的功能更改为

function insertTxt(el) {
  var textstring = el.text;
  parent.iframe1.document.getElementsByTagName("input")[0].value = textstring;
}

Answer 2

您可能需要配置服务器才能执行此操作，否则您将收到CORS错误。

我在这里使用querySelector，但它也应该与elementsByTagName和id一起使用。

iFrame.document未定义，但您可以像这样获取iFrame的内容。如果您在尝试这样做时没有出错，那么您就可以去了。

var iFrame = document.querySelector('#frame1'),
    iFrameContent = iframe.contentDocument || iframe.contentWindow.document;

然后你应该能够从那里查询输入。如果您知道该文档不会改变并且总是看起来一样，那么您必须专门获取您正在寻找的输入框

var n = <the n'th input>
var input = iFrame.querySelectorAll('input')[n];

使用查询选择器，您可以获得更具体的信息，并仅获取类型为文本的输入：

var m = <the m'th input where type is text>
var input = iFrame.querySelectorAll('input[type="text"')[m]

然后，当您收到输入时，请更改输入值，如下所示：

input.value = "text here";

修改

如何使用它的一个例子：

function insertTxt(text) { /// get the iFrame and then it's 'document' var iFrame = document.querySelector('#frame1'), iFrameContent = iframe.contentDocument || iframe.contentWindow.document; // get the first input box with type text var input = iFrame.querySelectorAll('input[type="text"')[0] // set the value of the input field to that text input.value = text; }

更改输入字段很简单。您现在面临的问题是Cross domain Policy。如果该iFrame的src不在您尝试使用此脚本的同一个网域上，那么您将收到错误。

Javascript将数据从链接输入到iFrame中的文本字段中

2 个答案: