Question

我的概念是从iframe更新主页面中文本框的值。此代码在firefox中有效，但在Internet Explorer和Chrome中无效。 main.html和frame.html都位于同一位置。我需要建议让它在所有浏览器中运行。

main.html中

<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>

frame.html

<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
 var frame_value = document.getElementById("framebox").value;
 window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>

Answer 1

根据安全策略，跨域访问受到限制。如果您尝试在域2中显示域1中的页面并尝试从域1中的脚本操作域2中的DOM，则会发生这种情况。如果从服务器上的相同位置运行页面。这不应该发生。但是，如果您只是将它们保存为HTML文件并尝试在浏览器中打开它们，那么它应该不起作用。我为你的代码创建了两个jsbins，它正在使用chrome。尝试使用以下链接访问它们。

Main.html：http://jsbin.com/afazEDE/1 iframe.html：http://jsbin.com/ayacEXa/1/

尝试通过在Chrome（F12）中保持控制台打开并单击填充按钮，在JSBin中以编辑模式运行main.html。它将无法正常工作，并会向您显示错误。如果按原样运行它们（在JSBin的运行模式下），它将起作用。

Answer 2

Jquery -

function PushValues()
{
  var frame_value = $('#framebox').val();
  parent.$('body').find('#parentbox').val(frame_value);
}

它总是对我有用。

Answer 3

在像xampp或wamp这样的服务器上运行此代码它不能直接使用

<强> main.html中

<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html" ></iframe>
<script>
window._fn ={ printval:function(response){
              $('input').val(response) ;

              }};

              </script>
</body>

<强> IFRAME

<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">

<script language="javascript">
         function PushValues(){
          window.parent._fn['printval']($('input').val());
         }

          </script>   


</body>
</html>

Answer 4

因为你正在使用jQuery试试这个

var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);

Answer 5

您应该尝试与iframe和Internet Explorer高度相关的P3P政策。响应标头设置为iframe文档

header key= 'P3P'   header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

window.parent.document在firefox中工作，但不在chrome和IE中

5 个答案: