2. 程式人生 > >iframe與主框架跨域相互訪問方法

iframe與主框架跨域相互訪問方法

阿新 • • 發佈：2019-02-12

iframe 與主框架相互訪問方法

1.同域相互訪問


假設A.html 與 b.html domain都是localhost （同域）

A.html中iframe 嵌入 B.html，name=myframe

A.html有js function fMain()

B.html有js function fIframe()

需要實現 A.html 呼叫 B.html 的 fIframe()，B.html 呼叫 A.html 的 fMain()

A.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
    >
  2. <html>
  3.  <head>
  4.   <metahttp-equiv="content-type"content="text/html; charset=utf-8">
  5.   <title> main window </title>
  6.   <scripttype="text/javascript">
  7.   // main js function  
  8.   function fMain(){  
  9.     alert('main function execute success');  
  10.   }  
  11.   // exec iframe function  
  12.   function exec_iframe(){  
  13.     window.myframe.fIframe();  
  14.   }  
  15.   </script>
  16.  </head>
  17.  <body>
  18.   <p>A.html main</p>
  19.   <p><inputtype="button"value="exec iframe function"onclick="exec_iframe()"></p>
  20.   <iframesrc="B.html"name="myframe"width="500"height
    ="100"></iframe>
  21.  </body>
  22. </html>

B.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <metahttp-equiv="content-type"content="text/html; charset=utf-8">
  5.   <title> iframe window </title>
  6.   <scripttype="text/javascript">
  7.   // iframe js function   
  8.   function fIframe(){  
  9.     alert('iframe function execute success');  
  10.   }  
  11.   // exec main function  
  12.   function exec_main(){  
  13.     parent.fMain();  
  14.   }  
  15.   </script>
  16.  </head>
  17.  <body>
  18.   <p>B.html iframe</p>
  19.   <p><inputtype="button"value="exec main function"onclick="exec_main()"></p>
  20.  </body>
  21. </html>

點選A.html 的 exec iframe function button，執行成功，彈出iframe function execute success。如下圖



點選B.html 的 exec main function button，執行成功，彈出 main function execute success。如下圖

2.跨域互相訪問


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

這裡使用 localhost 與 127.0.0.1 只是方便測試，localhost 與 127.0.0.1已經不同一個域，因此執行效果是一樣的。

實際使用時換成 www.domaina.com 與 www.domainb.com 即可。

A.html中iframe 嵌入 B.html，name=myframe

A.html有js function fMain()

B.html有js function fIframe()

需要實現 A.html 呼叫 B.html 的 fIframe()，B.html 呼叫 A.html 的 fMain() （跨域呼叫）


如果使用上面同域的方法，瀏覽器判斷A.html 與 B.html 不同域，會有錯誤提示。

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://127.0.0.1". Protocols, domains, and ports must match.

實現原理：

因為瀏覽器為了安全，禁止了不同域訪問。因此只要呼叫與執行的雙方是同域則可以相互訪問。

首先，A.html 如何呼叫B.html的 fIframe方法

1.在A.html 建立一個 iframe

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

3.execB.html 裡有呼叫B.html fIframe方法的js呼叫

[javascript] view plaincopy在CODE上檢視程式碼片派生到我的程式碼片
  1. <script type="text/javascript">  
  2. parent.window.myframe.fIframe(); // execute parent myframe fIframe function
  3. </script>  

這樣A.html 就能通過 execB.html 呼叫 B.html 的 fIframe 方法了。

同理，B.html 需要呼叫A.html fMain方法，需要在B.html 嵌入與A.html 同域的 execA.html 

execA.html 裡有呼叫 A.html fMain 方法的js 呼叫

[javascript] view plaincopy在CODE上檢視程式碼片派生到我的程式碼片
  1. <script type="text/javascript">  
  2. parent.parent.fMain(); // execute main function
  3. </script>  
這樣就能實現 A.html 與 B.html 跨域相互呼叫。

A.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <metahttp-equiv="content-type"content="text/html; charset=utf-8">
  5.   <title> main window </title>
  6.   <scripttype="text/javascript">
  7.   // main js function  
  8.   function fMain(){  
  9.     alert('main function execute success');  
  10.   }  
  11.   // exec iframe function  
  12.   function exec_iframe(){  
  13.     if(typeof(exec_obj)=='undefined'){  
  14.         exec_obj = document.createElement('iframe');  
  15.         exec_obj.name = 'tmp_frame';  

  16. 相關推薦

    iframe與主框架跨域相互訪問方法

    iframe 與主框架相互訪問方法 1.同域相互訪問 假設A.html 與 b.html domain都是localhost （同域） A.html中iframe 嵌入 B.html，name=myframe A.html有js funct

    JavaScript使ifram跨域相互訪問及與PHP通訊的例項

    iframe 與主框架相互訪問方法 1.同域相互訪問 假設A.html 與 b.html domain都是localhost （同域） A.html中iframe 嵌入 B.html，name=myframe A.html有js function fMain() B.htm

    ASP.Net WebAPI與Ajax進行跨域數據交互時Cookies數據的傳遞

    調整 ucc header set 定義 div ren ext domain 前言 最近公司項目進行架構調整，由原來的三層架構改進升級到微服務架構（準確的說是服務化，還沒完全做到微的程度，顆粒度沒那麽細），遵循RESTFull規範，使前後端完全分離，實現大前端思想。由於是

    CORS 跨域與 TP5中跨域的解決方案

    在做專案過程中,使用Vue-element-admin作為前端,ThinkPHP5作為後端框架進行開發,會遭遇跨域問題,本文給出ThinkPHP5解決跨域 1.CORS的概念     CORS（Cross-Origin Resource Sharing 跨源資源共享），當

    JS跨域ajax訪問

    方式1:jsonp解決跨域訪問 需要服務和js配合 服務   [WebMethod] public void HelloWorld2(string name) { HttpContext.Current.Response.Content

    跨域HTTP訪問控制（CORS）

    不同 mage http訪問 分享圖片 跨域 .com 客戶 http src 同源： http、ip、port 三者要一樣，否則會被視為不同源 　　　 二 、 客戶端 三、後臺 跨域HTTP訪問控制（CORS）

    SpringBoot 1.X版本設定Https訪問以及跨域https訪問的問題

    最近在做的一個專案中出現了Https域向非Https域傳送ajax請求無法通過的問題 Mixed Content: The page at was loaded over HTTPS, but requested an insecure XMLHtt

    由一個“兩次請求”引出的Web伺服器跨域請求訪問問題的解決方案

    我們公司的專案都是前後端分離的，上線幾個月以來，發現一個很奇怪的問題，每次前端發起請求，通過瀏覽器的開發者工具都能看到在Network下同一個url有兩條請求，第一條請求的Method為OPTIONS

    關於python的bottle框架跨域請求報錯問題的處理

    　　在用python的bottle框架開發時，前端使用ajax跨域訪問時，js程式碼老是進入不了success，而是進入了error，而返回的狀態卻是200。url直接在瀏覽器訪問也是正常的，瀏覽器按F12後會發現下面這個錯誤提示 XMLHttpRequest cann

    WebApi系列~開放的CORS，跨域資源訪問對所有人開放

    之前有客戶問我，如何AJAX跨域post，這個問題挺有意思，在我們看來，我是不被允許的，因為它是不安全的，但隨著web api的火熱，這個東西也被人們一步步的接受了，確實，有時，我們的介面希望對所有人公開，它並不在乎有人惡意去ＰＯＳＴ灌資料，呵呵！ 實現思路：向HTTP

    JS跨域（ajax跨域、iframe跨域）解決方法及原理詳解

    js跨域是指通過js在不同的域之間進行資料傳輸或通訊，比如用ajax向一個不同的域請求資料，或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同，都被當作是不同的域。 要解決跨域的問題，我們可以使用以下幾種方法： 1、

    Spring Security (CORS)跨域資源訪問配置

    跨域 class 瀏覽器和服務器 fig w3c xmlhttp nbsp gin ima 1、CORS介紹 CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源(協議 + 域名 + 端口)服務器

    httpclient：與springmvc進行跨域傳輸，上傳檔案，攜帶引數——使用HttpPost方式

    一.上傳檔案1.HttpClient類/** * @param file * @param url */ public static void uploadFileByHttpPost(File file, String url) { CloseableHt

    apache如何解決跨域資源訪問

    很多時候，大中型網站為了靜態資源分散式部署，加快訪問速度，減輕主站壓力，會把靜態資源（例如字型檔案、圖片等）放在獨立伺服器或者CDN上，並且使用獨立的資源域名（例如res.test.com） 但是在實際部署中，會發現瀏覽器無法載入這些不同域名的資源，firefox控制檯會報

    JS跨域（ajax跨域、iframe跨域）解決方法及原理詳解（jsonp）

    這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊，比如用ajax向一個不同的域請求資料，或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同，都被當作是不同的域。 下表給出了相對http://store.company.com/dir/page.htm

    解決angularjs使用iframe載入網址的跨域請求

    <iframe  ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 開啟不同域的內容時報下面的錯誤:Blocked loading res

    ci 框架兩種解決跨域問題的方法

    1、$this->output->set_header("Access-Control-Allow-Origin: * "); $this->output->set_output

    SpringSecurity使用JWT與前端互動跨域解決後端獲取header中的Authorization的token值

    主要問題:針對前後端分離後,前端使用ajax進行請求，存在一些跨域的問題。後端對跨域的問題進行解決，因為我是使用的Springboot框架做的後端，首先解決普通請求跨域的問題@CrossOrigin每一個controller類上需要新增CrossOrigin的註解進行處理。新

    goframe 框架跨域 設置

    req requested head agent red server ejs get serve s := g.Server() s.BindHookHandlerByMap("/*any", map[string]ghttp.HandlerFunc{

    WebAPI Ajax 跨域請求解決方法（CORS實現）

    custom XML header 就會 情況 取數 -o cross serve 概述 ASP.NET Web API 的好用使用過的都知道，沒有復雜的配置文件，一個簡單的ApiController加上需要的Action就能工作。 但是在使用API的時候總會遇到跨