Javascript-使用iframe输入值填充输入_Javascript_Iframe_Input_Fill

Javascript-使用iframe输入值填充输入

javascript iframe input

Javascript-使用iframe输入值填充输入,javascript,iframe,input,fill,Javascript,Iframe,Input,Fill,我想用iframe的值填充输入。我有两个html文件。1.html和2.html 第一个（1.html）是这样的： <html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><br /> <iframe src="2.html" id="myl

我想用iframe的值填充输入。
我有两个html文件。1.html和2.html
第一个（1.html）是这样的：

<html>
<head>
<title>IFRAME TEST</title>
</head>
<body>
<input type="text" value="" id="mylovelytextbox"><br />
<iframe src="2.html" id="mylovelyiframe">
</body>
</html>

<html>
<head>
<form method="get" action="">
<input type="hidden" name="thisone" value="mylovelychangedvalue">
</form>
</body>
</html>

<html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><input type="button" onClick="var iframe = document.getElementById('mylovelyiframe');console.log(iframe,doc,el);var doc = iframe.contentDocument || iframe.contentWindow.document;var el = document.getElementById('mylovelytextbox');el.value = doc.getElementsByName('thisone')[0].value;" value="Click"><br /> <iframe sandbox="allow-same-origin allow-scripts" src="2.html" id="mylovelyiframe"></iframe> </body> </html>


IFRAME测试

第二个（2.html）是这样的：

<html>
<head>
<title>IFRAME TEST</title>
</head>
<body>
<input type="text" value="" id="mylovelytextbox"><br />
<iframe src="2.html" id="mylovelyiframe">
</body>
</html>

<html>
<head>
<form method="get" action="">
<input type="hidden" name="thisone" value="mylovelychangedvalue">
</form>
</body>
</html>

<html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><input type="button" onClick="var iframe = document.getElementById('mylovelyiframe');console.log(iframe,doc,el);var doc = iframe.contentDocument || iframe.contentWindow.document;var el = document.getElementById('mylovelytextbox');el.value = doc.getElementsByName('thisone')[0].value;" value="Click"><br /> <iframe sandbox="allow-same-origin allow-scripts" src="2.html" id="mylovelyiframe"></iframe> </body> </html>

我想在1.html中用这个值填充我的LovelyTextBox。我该怎么做？ -对不起，英语不好：(

编辑：

我在@stano的帮助下运行代码：）现在，我的代码如下：

<html>
<head>
<title>IFRAME TEST</title>
</head>
<body>
<input type="text" value="" id="mylovelytextbox"><br />
<iframe src="2.html" id="mylovelyiframe">
</body>
</html>

<html>
<head>
<form method="get" action="">
<input type="hidden" name="thisone" value="mylovelychangedvalue">
</form>
</body>
</html>

<html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><input type="button" onClick="var iframe = document.getElementById('mylovelyiframe');console.log(iframe,doc,el);var doc = iframe.contentDocument || iframe.contentWindow.document;var el = document.getElementById('mylovelytextbox');el.value = doc.getElementsByName('thisone')[0].value;" value="Click"><br /> <iframe sandbox="allow-same-origin allow-scripts" src="2.html" id="mylovelyiframe"></iframe> </body> </html>

IFRAME测试

非常感谢，斯塔诺

首先修复丢失的标签

并添加一些doctype，然后您可以使用


var iframe=document.getElementById（'mylovelyiframe'）；
var doc=iframe.contentDocument | | iframe.contentWindow.document；
var elem=document.getElementById（'mylovelytextbox'）；
elem.value=doc.getElementsByName（'thisone'）[0].value；

没有那么复杂。。。你试过什么？我试过很多东西，我在最后一个小时搜索过。如果不复杂的话，你能回答我的问题吗：（@AtaGülalan，当你想要这个“自动填充”时）发生了什么？哦？我想它不起作用了。我的代码是这样的：IFRAME TEST
我做错了什么吗？@AtaGülalan对我来说，它可以工作，请检查你的

2.html文件：在Firefox中工作良好，但Chrome限制了框架的使用。它在Chrome中不起作用。我如何在Chrome上运行此代码？不要在Chrome w中测试IFRAMEith文件：//
协议。Chrome总是在控制台中报告：阻止原点为“null”的帧访问原点为“null”的帧。协议、域和端口必须匹配。
（使用Ctrl+Shift+J打开它
）使用http://localhost/1.html
或切换到Firefox。您可以在页面中使用iFrame，它也可以在Chrome中使用，但只能在http://protocol中使用。要使用Chrome测试/开发iFrame，请安装或类似的工具，或者使用一些不太严格的浏览器（例如Firefox为web开发人员提供了许多优秀的功能和工具；-））