iframe跨域访问

最新推荐文章于 2024-08-27 04:23:06 发布

hdchangchang

最新推荐文章于 2024-08-27 04:23:06 发布

阅读量811

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/hdchangchang/article/details/47780419

版权

原生js 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

一般分两种情况：

一、是同主域下面，不同子域之间的跨域；

　　同主域，不同子域跨域，设置相同的document.domian就可以解决;

父页访问子页，可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容；如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument访问子页面内容；

<script>
function changeStyle(){
    var x=document.getElementById("myframe");
    var y=(x.contentWindow || x.contentDocument);
    if (y.document) y=y.document;
    y.body.style.backgroundColor="#0000ff";
}
</script>

　　子页访问父页，可以window.parent访问

二、是不同主域跨域；

　　假设 A.html domain是 localhost， B.html domain 是 127.0.0.1 （跨域）

首先，A.html 如何调用B.html的 fIframe方法

1.在A.html 创建一个 iframe

2.iframe的页面放在 B.html 同域下，命名为execB.html

3.execB.html 里有调用B.html fIframe方法的js调用 : parent.window.myframe.fIframe()

这样A.html 就能通过 execB.html 调用 B.html 的 fIframe 方法了。

同理，B.html 需要调用A.html fMain方法，需要在B.html 嵌入与A.html 同域的 execA.html

execA.html 里有调用 A.html fMain 方法的js 调用。具体代码如下

A.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> main window </title>
 
  <script type="text/javascript">
 
  // main js function
  function fMain(){
	alert('main function execute success');
  }
 
  // exec iframe function
  function exec_iframe(){
	if(typeof(exec_obj)=='undefined'){
		exec_obj = document.createElement('iframe');
		exec_obj.name = 'tmp_frame';
		exec_obj.src = 'http://127.0.0.1/execB.html';
		exec_obj.style.display = 'none';
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = 'http://127.0.0.1/execB.html?' + Math.random();
	}
  }
  </script>
 
 </head>
 
 <body>
  <p>A.html main</p>
  <p><input type="button" value="exec iframe function" οnclick="exec_iframe()"></p>
  <iframe src="http://127.0.0.1/B.html" name="myframe" width="500" height="100"></iframe>
 </body>
</html>

B.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> iframe window </title>
 
  <script type="text/javascript">
  // iframe js function 
  function fIframe(){
	alert('iframe function execute success');
  }
 
  // exec main function
  function exec_main(){
	if(typeof(exec_obj)=='undefined'){
		exec_obj = document.createElement('iframe');
		exec_obj.name = 'tmp_frame';
		exec_obj.src = 'http://localhost/execA.html';
		exec_obj.style.display = 'none';
		document.body.appendChild(exec_obj);
	}else{
		exec_obj.src = 'http://localhost/execA.html?' + Math.random();
	}
  }
  </script>
 
 </head>
 
 <body>
  <p>B.html iframe</p>
  <p><input type="button" value="exec main function" οnclick="exec_main()"></p>
 </body>
</html>

execA.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> exec main function </title>
 </head>
 
 <body>
 	<script type="text/javascript">
		parent.parent.fMain(); // execute main function
	</script>
 </body>
</html>

execB.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> exec iframe function </title>
 </head>
 
 <body>
	<script type="text/javascript">
		parent.window.myframe.fIframe(); // execute parent myframe fIframe function
	</script>
 </body>
</html>