1. 程式人生 > >iframe及其跨域通訊方式集合

iframe及其跨域通訊方式集合

iframe通訊分為兩種情況,一個是同域下通訊,另一個是跨域通訊

================================================================

先看看同域下父子頁面通訊:

我們寫兩個頁面便於比較分析:

父頁面parent.html:

<html>

  <head>

    <script type="text/javascript">

      function say() {

        alert("我是父頁面方法");

      }

      function callChild(){

        myFrame.window.say();

        myFrame.window.document.getElementById("myInput").value="我變了";

      }

    </script>

  </head>

  <body>

    <input type=button value="呼叫child.html中的函式say()" onclick="callChild()">

    <iframe name="myFrame" id="child" src="child.html"></iframe>

  </body>

</html>

相關推薦

iframe及其通訊方式集合

iframe通訊分為兩種情況,一個是同域下通訊,另一個是跨域通訊 ================================================================ 先看看同域下父子頁面通訊: 我們寫兩個頁面便於比較分析: 父頁面pare

iframe通訊

簡述: window.postMessage方法,允許跨視窗通訊,不論這兩個視窗是否同源。 視窗都可以通過message事件,監聽對方的訊息。 語法: otherWindow.postMessage(message, targetOrigin, [transfer]); messag

前端通訊的幾種方式

一、JSONP 我們都知道script標籤src屬性中的連結卻可以訪問跨域的js指令碼,利用這個特性,服務端不再返回JSON格式的資料,而是返回一段呼叫某個函式的js程式碼,在src中進行了呼叫函式來獲取到資料,函式中的引數就是我們需要的資料,這樣實現了跨域。 基本思想是: 1、客戶端利

iframe通訊的通用解決方案

一、背景 在這個Web頁面越來越豐富的時代,頁面通過iframe嵌入其他的頁面也越來越常見。但由於瀏覽器同源策略的限制,不同域之間屬性和操作是無法直接互動的,所以在這個時候,開發者多多少少需要一些方案來突破這些限制。跨域問題涉及的地方也很多,如文件之間的訊息

通用版父頁面訪問iframe裡面的內容解決方案,jupyter+tornado通訊解決方案

1、問題:獲取jupyter裡面的內容現在已經將jupyter放進iframe裡面,現在的問題描述為:在父頁面獲取iframe裡面的內容,iframe裡面就是jupyter,這裡的父頁面是自己搭建的tornado伺服器開啟的頁面,網址為127.0.0.1:9000,ifram

iframe 利用postMessage 通訊

1.子頁面:http://localhost:7080/b.jsp <button onclick="send()">send</button> <script> window.addEventListener('message', f

iframe、ajax和JS通訊的幾種解決方案

 需要ajax跨域取得資料,如果是在本域中確實沒有問題,但是放到二級域和其他域下瀏覽器直接就彈出提示框:“該頁正在訪問其控制範圍之外的資料,這有些危險,是否繼續"  1.什麼引起了ajax跨域不能的問題  ajax本身實際上是通過XMLHttpRequest物件來進行資

實現AJAX訪問方式

nbsp any logs type pin web ted class pattern 1.添加pom依賴 <dependency> <groupId>com.thetransactioncompany</groupId>

實現方式

不支持 tro get請求 必須 標簽 發送 方式 頁面 服務 同源:同協議、端口、域名(三者必須全部相同) 同源策略:瀏覽器不允許當前頁面向非同源站點發送請求(防止用戶信息被惡意站點獲取的基本措施) 跨域請求:當前站點向某些非同源站點進行請求 跨域請求方式: 一、服務

用postMessage解決通訊呼叫js問題

本文轉自:https://bbs.implug.cn/?thread-3.htm 平時做web開發的時候關於訊息傳遞,除了客戶端與伺服器傳值,還有幾個經常會遇到的問題: 多視窗之間訊息傳遞(newWin = window.open(…)); 頁面與巢狀的iframe訊息傳遞

日常開發中的幾個常用處理方式

geo htm 網站 options https ss代理 write npm 服務端 設置express代理請求 在基於vue-cli的項目中,在開發環境配置(config/dev.env.js)中設置代理,能夠將所有/apidomain開頭的請求都通過npm run d

請求方式理解

jaonp方式(jsonp 是通過script 標籤方式實現的,相當於鑽了個空子) 更改伺服器響應頭:(網站開發建議使用這種),更改響應頭後允許跨域。 jsonp實現跨域請求 前端     $.ajax({      

javascript中實現方式總結

第一種方式:jsonp請求;jsonp的原理是利用&lt;script&gt;標籤的跨域特性,可以不受限制地從其他域中載入資源,類似的標籤還有&lt;img&gt;. 第二種方式:document.domain;這種方式用在主域名相同子域

JSONP(JS進行通訊)

  程式碼地址:https://github.com/youaresherlock/HeadFirstHtml5 在閱讀headfirsthtml5時,學習了同源策略以及JSONP。下面我簡單介紹一下: 瀏覽器的同源策略: 同源策略限制了從同一個源載入的文件或指

HTML元素Iframe嵌入介面(React程式碼)

背景: 使用Iframe嵌入別的域的介面,涉及安全、跨域等問題 程式碼: import React, { Component } from 'react'; class A extends Component { // xxx; render() { ret

iframe解決問題

需求:主域頁面(http://www.temp.org/test.html)發起ajax請求獲取二級域名頁面(http://test.temp.org/test2.html)內容 初始錯誤做法: $.ajax({ type:"post",.

post方式傳遞資料解決方案--CORS

摘要: 一晃又到新年了,於是開始著手好好整理下自己的文件,順便把一些自認為有意義的放在部落格上,記錄成點的點滴。         跨域是我在日常面試中經常會問到的問題,這詞在前端界出現的頻率不低,主要原因還是由於安全限制(同源策略, 即JavaScript或

什麼是?常見的方式都有哪幾種

跨域指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的,是瀏覽器對javascript施加的安全限制。 同源就是指,域名,協議,埠均相同。 這裡要注意一下,localhost和127.0.0.1雖然都指向本機,但也屬於跨域。 loc

使用CORS實現方式

     跨域是我們日常專案中經常遇到的問題,之前所使用的跨域解決方案是使用jsonp,但是如果某天需求變了,某功能需要改成支援POST,因為傳輸的資料量比較大,GET形式搞不定,這時就需要CORS出

js前端進行同一域名或不同域名下兩個頁面通訊

解決同一域名下和不同域名下的兩個頁面之間進行傳值,可以支援json格式,相容ie8,傳送訊息的postMessage方法支援IE8+,但是在接收訊息的時候, window.attachEvent方法只支援ie微軟的私有方法,不支援火狐、谷歌等高板本瀏覽器,這是對支援ie8瀏