My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
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=".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>
My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
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./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>
- any errors in console? – Ivan Chernykh Commented Jul 22, 2013 at 7:25
-
did you try
window.top.document– Sushanth -- Commented Jul 22, 2013 at 7:26 - The code worked fine as-is for me in Firefox, Chrome, Safari, and IE, although you should really close your <iframe> tag. – Chris Commented Jul 22, 2013 at 18:53
- @Chris I do have a closing tag for iframe , I just missed it here . Could you please tell me your browser versions . – Nishanth Lawrence Reginold Commented Jul 23, 2013 at 2:35
-
1
@Cherniv Am getting the following errors in Chrome console . 1.
Blocked a frame with origin "null" from accessing a frame with origin "null".2.Protocols, domains, and ports must match. Uncaught TypeError: Cannot call method 'getElementById' of undefined .– Nishanth Lawrence Reginold Commented Jul 23, 2013 at 2:42
5 Answers
Reset to default 2As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin./afazEDE/1 iframe.html: http://jsbin./ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery./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./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>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer. response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'