<html>
<head>
<title>test</title>
<script type="text/javascript">
function changeInput(){
var url = document.getElementById("f2").contentWindow.location;
document.getElementById("input2").value = url;
}
function start(){
document.getElementById("f1").onload = function(){
var url = document.getElementById("f1").contentWindow.location;
document.getElementById("input1").value = url;
};
}
</script>
</head>
<body onload="start()">
<iframe src="http://www.google.com/" id="f1" width="100" height="100"></iframe>
<input type="text" id="input1"/>
<iframe src="http://www.google.com/" id="f2" width="100" height="100" onload="changeInput()"></iframe>
<input type="text" id="input2"/>
</body>
</html>
On Safari:
- input1 – display nothing
- input2 – display URL
On Firefox:
- input1 – display nothing
- input2 – display nothing
and there is an error with Firefox:
Permission denied to access property 'toString'
document.getElementById("input2").value = url;
How could this happen?
What should I do to make BOTH two inputs display the URL?
thank you.
For security, Same origin policy restricts access to objects hosted in frames that are part of another domain. You would not want to be able to fetch that data from say an online bank page loaded in a frame.