iframe 跨域相互操做

時間 2019-11-17

標籤 iframe 相互欄目 HTML 简体版

原文原文鏈接

咱們在開發後臺管理系統時可能會常常要跟 iframe 打交道，由於如今大部分後臺管理系統都是頁面內嵌iframe，因此有時候二者之間就不免要互相通訊,但瀏覽器爲了安全的緣由，因此就禁止了不一樣域的訪問，因此如今咱們就用一種簡單通俗的辦法解決這個問題：javascript

a頁面和c頁面都是 www.aaa.com域名下的，b頁面是www.bbb.com域名下的，a頁面內嵌的iframe是b頁面，若是如今b頁面想調用a頁面的方法，那麼就須要在b頁面動態建立一個iframe而這個iframe就是c頁面，c頁面須要和a頁面在同一個域名下，以下圖所示：html

a.html頁面代碼java

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.aaa.com頁面下a.html</title>
<script type="text/javascript">
function alerFun(){
    alert('我是www.aaa.com域名下 a頁面的方法');
}
</script>
</head>

<body>
<div>www.aaa.con-------a.html</div><br>
<iframe src="http://127.0.0.1/iframe/kuayu/b.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>

b.html頁面代碼瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.bbb.com域名下b頁面</title>
<script type="text/javascript">
function creatFrame(){
  if(typeof(oFrame)=='undefined'){
      oFrame = document.createElement('iframe');
      oFrame.src = 'http://localhost/iframe/kuayu/c.html';
      oFrame.style.display = 'none';
      document.body.appendChild(oFrame);
  }else{
      oFrame.src = 'http://localhost/iframe/kuayu/c.html?' + Math.random();
  }
}
</script>
</head>

<body>
<div>www.bbb.con-------b.html</div>
<div><input type="button" value="調用a頁面的方法" onclick="creatFrame()"></div>
</body>
</html>

c.html頁面代碼安全

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.aaa.com頁面下c.html</title>
</head>

<body>
<script type="text/javascript">
    parent.parent.alerFun(); 
</script>
</body>
</html>

c頁面其實就是一個自執行函數，當建立這個頁面時就會自動執行同域下a頁面裏的函數，因此咱們就能夠在b頁面經過中間層C頁面來調用父框架a頁面的方法了~app

效果圖以下：框架

同理若是想讓a頁面調用b頁面的方法也是如此，剩下的就本身動手試試吧~dom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。