jsiframe跨域請求_如何用javascript 跨域獲取iframe子頁面的元素信息

A. 如何用javascript 跨域獲取iframe子頁面的元素信息

在當前頁面寫js：

<script>
function GridSearch() {
var ifr = document.getElementById('Soft_Iframe');//Soft_Iframe是iframe的id
var win = ifr.window || ifr.contentWindow;
win.FilterSearch();//是iframe裡面的js方法，相當於執行子頁面的內容。

}
</script>

然後在iframe裡面顯示的那個頁面上寫js方法：
<script>
function FilterSearch(){
//這裡面寫你要獲得當前頁面元素的信息。
}
</script>

B. js 簡單使用postMessage iframe跨域通信

postMessage是html5引入的API,postMessage()方法允許來自不同源的腳本採用非同步方式進行有效的通信,可以實現跨文本文檔,多窗口,跨域消息傳遞.多用於窗口間數據通信,這也使它成為跨域通信的一種有效的解決方案.

要發送到其他窗口的數據,它將會被 !結構化克隆演算法序列化.這意味著你可以不受什麼限制的將數據對象安全的傳送給目標窗口而無需自己序列化.

通過窗口的origin屬性來指定哪些窗口能接收到消息事件,指定後只有對應origin下的窗口才可以接收到消息,設置為通配符"*"表示可以發送到任何窗口,但通常處於安全性考慮不建議這么做.如果想要發送到與當前窗口同源的窗口,可設置為"/"

是一串和message同時傳遞的 Transferable 對象,這些對象的所有權將被轉移給消息的接收方,而發送一方將不再保有所有權.

下面是列印出的結果 data屬性為傳輸過來的數據

若用到的地方很多建議加上 targetOrigin 屬性並且給數據加好type確保數據正確的被接收

歡迎對這個有研究、有興趣或者發現文章有錯誤的地方的夥伴們和我交流,共同進步~~~

C. iframe跨域通信方案

概述

JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了不少麻煩。這里把涉及到跨域的一些問題簡單地整理一下：

首先什麼是跨域，簡單地理解就是因為JavaScript同源策略的限制，a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。更詳細的說明可以看下錶：

對於主域相同子域不同的通信方法這里不一一列舉了，這里主要講解一下跨主域的通信問題。

postMessage方法

window.postMessage 是一個用於安全的使用跨源通信的方法。通常，不同頁面上的腳本只在這種情況下被允許互相訪問，當且僅當執行它們的頁面所處的位置使用相同的協議（通常都是 http）、相同的埠（http默認使用80埠）和相同的主機（兩個頁面的 document.domain 的值相同）。在正確使用的情況下，window.postMessage 提供了一個受控的機制來安全地繞過這一限制。

兼容性

http://caniuse.com/#search=postMessage

具體用法

發送消息：destination.postMessage(message, targetOrigin);

destination: 目標窗口

message:發送的消息

targetOrigin: 定義發送消息的范圍

監聽接受消息：window.addEventListener(『message』,callback,false);

已知問題

部分版本IE8/9瀏覽器只支持iframe通信，不支持tabs之間通信。

IE8/9不能傳輸對象，只能傳輸string。

參考資料

mozlia官方文檔： https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage

IE官方文檔: https://status.modern.ie/postmessage

webplatform文檔: https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage

HTML5官方文檔: https://html.spec.whatwg.org/multipage/comms.html#web-messaging

window.navigator(適用於ie6/7)

ie6/7有個漏洞,父窗口與所有的iframe共享window.navigator對象，可以利用這個漏洞，由於ie6/7不支持postMessage,所以可以利用這個漏洞對ie6/7做兼容跨域通信支持。

具體用法

途中A過程和B過程都是初始化監聽事件，類似於onmessage事件。只不過實現方法不一樣而已。

按執行順序來描述的話，如下：

B: 父窗口向window.navigator添加一個監聽函數，並打上父窗口的戳。

A: 子窗口向window.navigator添加一個監聽函數，並打上子窗口的戳。

C: 父窗口執行post的時候，調用原先子窗口添加在navigator里的監聽函數，並將要傳輸的數據作為函數參數傳入。

D: 子窗口執行post的時候，調用原先父窗口添加在navigator里的監聽函數，並將要傳輸的數據作為函數參數傳入。

注意：子窗口和父窗口要找到對方的監聽函數必須得事先知道對方在添加監聽函數的時候打上的戳

D. 什麼是跨域請求

1.瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、埠、協議任一不同，都是跨域
2.只要協議、域名、埠有任何一個不同，都被當作是不同的域，之間的請求就是跨域操作。

協議http和https不同，埠80還是81，域名更好理解

跨域限制主要是為了安全考慮

瀏覽器的同源策略會導致跨域，這里同源策略又分為以下兩種DOM同源策略：
1.禁止對不同源頁面DOM進行操作。這里主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。
2.XmlHttpRequest同源策略：禁止使用XHR對象向不同源的伺服器地址發起HTTP請求。

https://blog.csdn.net/tjcjava/article/details/76468225

基本原理就是通過動態創建script標簽,然後利用src屬性進行跨域。

這么說比較模糊，我們來看個例子:// 定義一個fun函數

返回的js腳本，直接會執行。所以就執行了事先定義好的fun函數了，並且把數據傳入了進來。

當然，這個只是一個原理演示，實際情況下，我們需要動態創建這個fun函數，並且在數據返回的時候銷毀它。因為在實際使用的時候，我們用的各種ajax庫，基本都包含了jsonp的封裝，不過我們還是要知道一下原理，不然就不知道為什麼jsonp不能發post請求了

瀏覽器有跨域限制，但是伺服器不存在跨域問題，所以可以由伺服器請求所要域的資源再返回給客戶端。

對於主域名相同，而子域名不同的情況，可以使用document.domain來跨域這種方式非常適用於iframe跨域的情況，直接看例子吧比如a頁面地址為 http://a.yourhost.com b頁面為 http://b.yourhost.com 。這樣就可以通過分別給兩個頁面設置 document.domain = http://yourhost.com 來實現跨域。之後，就可以通過 parent 或者 window[『iframename』]等方式去拿到iframe的window對象了。

window.name跨域同樣是受到同源策略限制，父框架和子框架的src必須指向統一域名。window.name的優勢在於，name的值在不同的頁面(或者不同的域名)，載入後仍然存在，除非你顯示的更改。並且支持的長度達到2M.

E. js 跨域操作 iframe 裡面的元素

不可以。
iframe也存在跨域的問題。你只能修改iframe的熟悉，但是操作不了iframe裡面的元素。這是瀏覽器限制，非JS能力所及。

F. 如何用js操控iframe引用的跨域網站

<body>
	<buttonid="btn">submit</button>
	<iframesrc="http://www..com"id="frame"frameborder="0"></iframe>
</body>
<script>
	varbtn=document.getElementById('btn');
	varfr=document.getElementById('frame');
	btn.addEventListener("click",function(){
	fr.contentWindow.location.href="http://www.2345.com";
	});
</script>

給按鈕綁定個事件吧然後執行iframe.location.href="新聞頁地址";

G. JavaScript 怎麼跨域獲取 iframe 中的內容

如果 iframe地址與當前頁面地址同域，js可以訪問該頁面內的對象.

使用 window.frames[0] 或者window.frames[name] 來訪問frame的window對象

如要獲取元素，使用 window.frames[0].document.getElementById
另外，ie系列和webkit系列可能訪問方法上略有區別，具體可調試查看

H. 跨域怎麼解決

問題一：如何解決跨域問題特別注意兩點：
第一，如果是協議和埠造成的跨域問題「前台」是無能為力的，
第二：在跨域問題上，域僅僅是通過「URL的首部」來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。
「URL的首部」指window.location.protocol +window.location.host，也可以理解為「Domains, protocols and ports must match」。
2. 前端解決跨域問題
1> document.domain + iframe (只有在主域相同的時候才能使用該方法)
1) 在a/a中：
復制代碼
document.domain = 'a';
var ifr = document.createElement('iframe');
ifr.src = 'script.a/b';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
在這里操作doc，也就是b
ifr.onload = null;
};
復制代碼
2) 在script.a/b中：
document.domain = 'a';
2> 動態創建script
這個沒什麼好說的，因為script標簽不受同源策略的限制。
復制代碼
function loadScript(url, func) {
var head = document.head || document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='plete'){
func();
script.onload = script.onreadystatechange = null;
}
};
head.insertBefore(script......>>

問題二：如何解決跨域問題由於此前很少寫前端的代碼(哈哈，不合格的程序員啊)，最近項目中用到json作為系統間交互的手段，自然就伴隨著眾多ajax請求，隨之而來的就是要解決 ajax的跨域問題。本篇將講述一個小白從遇到跨域不知道是跨域問題，到知道是跨域問題不知道如何解決，再到解決跨域問題，最後找到兩種方法解決ajax 跨域問題的全過程。
不知是跨域問題
起因是這樣的，為了復用，減少重復開發，單獨開發了一個用戶許可權管理系統，共其他系統獲取認證與授權信息，暫且稱之為A系統；調用A系統以B為例。在B系統中用ajax調用A系統系統的介面(數據格式為json)，當時特別困惑，在A系統中訪問相應的url可正常回返json數據，但是在B系統中使用 ajax請求同樣的url則一點兒反應都沒有，好像什麼都沒有發生一樣。這樣反反復復改來改去好久都沒能解決，於是求救同事，提醒可能是ajax跨域問題，於是就將這個問題當做跨域問題來解決了。
知跨域而不知如何解決
知道問題的確切原因，剩下的就是找到解決問題的方法了。google了好久，再次在同事的指點下知道jQuery的ajax有jsonp這樣的屬性可以用來解決跨域的問題。
找到一種解決方式
現在也知道了怎樣來解決跨域問題，餘下的就是實現的細節了。實現的過程中錯誤還是避免不了的。由於不了解json和jsonp兩種格式的區別，也犯了錯誤，google了好久才解決。
首先來看看在頁面中如何使用jQuery的ajax解決跨域問題的簡單版：
復制代碼
$(document).ready(function(){
var url='localhost:8080/...upById
+?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});
復制代碼
這樣寫是完全沒有問題的，起先error的處理函數中僅僅是alert(「error」)，為了進一步弄清楚是什麼原因造成了錯誤，故將處理函數變為上面的實現方式。最後一行alert使用為；parsererror。百思不得其解，繼續google，最終還是在萬能的stackoverflow找到了答案，鏈接在這里。原因是jsonp的格式與json格式有著細微的差別，所以在server端的代碼上稍稍有所不同。
比較一下json與jsonp格式的區別：
json格式：
{
message&q......>>

問題三：跨域是指什麼,因為什麼引起的?有哪些解決方案?web前端知識跨域是指不同域名之間相互訪問例如我的電腦上有2個伺服器 192.168.0.11 192.168.0.12 如果第一個伺服器上的頁面要訪問第二個伺服器就叫做跨域或者要訪問xxx 也是不同域名也是跨域
HTML5 里有個window.postMessage 方法，支持跨域訪問，詳情可以參考
webhek/window-postmessage-api
如果你的程序在伺服器上，也可以進行相應的操作來完成跨域訪問
純手打有問題歡迎咨詢

問題四：如何解決跨域問題打開IE瀏覽器，在工具菜單下選擇Internet選項，打開Internet選項卡
切換到安全選項卡下，點擊可信站點，然後單擊站點按鈕
可信站點窗口輸入網址到可信站點的區域，點擊添加按鈕，網址則會添加到網站列表下，最後關閉可信站點窗口
還是在安全選項卡下的可信站點，點擊自定義級別
打開受信任的站點區域窗口，找到跨域瀏覽窗口和框架選擇啟用
在當前窗口中繼續往下翻，通過域訪問數據源也選擇啟用，點擊確定關閉受信任的站點區域窗口
在Internet窗口也點擊確定按鈕，同時關閉瀏覽器
在請求的js腳本中添加是否允許跨域訪問的許可權，jQuery.support.cors默認值為true，則代表允許；反之，不允許。設置完成，重新打開瀏覽器驗證即可

問題五：$跨域請求怎麼解決 post請求進行跨域
angularjs內置封裝了類ajax的網路服務$,所以實現了依賴外部插件來完成完整的前後端分離方案
$scope.main = {
getData: function () {
$({
method: 'POST',
url: 'localhost:8000',
headers: {
'Content-Type' : 'application/x--form-urlencoded'
},
data: {
myUrl: 'c.m.163/...0'
}
}).then(function success(result) {
數據請求成功
console.log(result.data);
},function error(err) {
數據請求失敗
console.log(err);
});
}
};
注意：表面上是向$中傳入了一個回調函數提供相應時調用，實際是返回了一個promise對象，angular1.2以上的版本對$進行了優化
優化後：
$scope.main = {
getData: function () {
var myUrl = 'c.m.163/...0';
var url = 'localhost:8000';
var promise = $({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
......>>

問題六：如何解決跨域問題關於跨域名問題還是問題么，這方面的解決實踐非常多，今天我就舊話重提把我所知道的通過幾個應用場景來分別總結一下（轉帖請註明出處：blog.csdn/lenel）
先說明一點：我說的某某域名在您的控制下的意思是這個域名下的網頁由您來負責開發內部的JavaScript
場景一：將bbs.xxx的頁面用iframe嵌入到xxx的中，如何在iframe內外使用js通信（轉帖請註明出處：blog.csdn/lenel）
一級域名都是xxx 這個域名一定是在您的控制下，所以你只要在兩個頁面中同時升級域名即可
在父窗口和iframe內部分別加上js語句：document.domain=xxx;
之後2個頁面就等於在同一域名下，通過window.parent oIframe.contentDocument就可以相互訪問，進行無障礙的JS通信
在新浪、淘寶等很多頁面都能找到這樣的語句。不過document.domain不可以隨便指定，只能向上升級，從bbs.xxx升級到yyy肯定會出錯
場景二：將yyy的頁面用iframe嵌入到xxx的中，兩個域名都在您的控制下，如何在iframe內外進行一定的數據交流（轉帖請註明出處：blog.csdn/lenel）
你可以通過相互改變hash值的方式來進行一些數據的通信
這里的實現基於如下技術要點：
1、父窗口通過改變子窗口的src中的hash值把一部分信息傳入，如果src只有hash部分改變，那麼子窗口是不會重新載入的。
2、
子窗口可以重寫父窗口的location.href，但是注意這里子窗口無法讀取而只能重寫location.href所以要求前提是您控制兩個域名，知
道當前父窗口的location.href是什麼並寫在子窗口內，這樣通過parent.location.href =
已知的父窗口的href+#+hash。這樣父窗口只有hash改變也不會重載。
3、上面兩步分別做到了兩個窗口之間的無刷新數據通知，
那麼下面的來說如何感知數據變化。標准中沒有相關規定，所以當前的任意瀏覽器遇到location.hash變化都不會觸發任何javaScript事
......>>

問題七：如何解決javascript的跨域問題一般是用iframe設置
document.domain = 'a';var ifr = document.createElement('iframe');ifr.src = 'a/index';ifr.style.display = 'none';document.body.appendChild(ifr);ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; console.log(doc.documentElement.innetHTML);};然後HTML5新特性有 ,postMessage
function Init () { if (window.addEventListener) { all browsers except IE before version 9 window.addEventListener (message, OnMessage, false); } else { if (window.attachEvent) { IE before version 9 window.attachEvent(onmessage, OnMessage); } } } function GetState () { var frame = document.getElementById (myFrame); var message = getstate;參數if (frame.contentWindow.postMessage) { 傳遞的參數，後面是傳遞的你的跨域域名frame.contentWindow.postMessage (message, *); } } function OnMessage (event) { console.log(event.data);} document.body.onload=function(){Init();GetState();};

問題八：如何解決跨域問題 VPN或者域名

問題九：如何解決請求跨域的問題 jsonp 是寫 script 標簽，只能滿足 get 請求。跨域 post 的話，IE8 及以上和其他主流瀏覽器可以用 window.postMessage 來實現，也就是傳說中的 HTML5 方法了，可以看下標准，代碼很簡單。IE6、7 就用老式的方法

問題十：怎麼解決伺服器間的跨域問題服務端的解決方案的基本原理就是，由客戶端將請求發給本域伺服器，再由本域伺服器的代理來請求數據並將響應返回給客戶端。
最常用的伺服器解決方案就是利用web伺服器本身提供的proxy功能，如apache和ligd的mod_proxy模塊。在網路內部，tran *** it的分流功能也可以解決部分跨域問題。但這些方法都有一定的局限性，鑒於安全性等問題的考慮，space這邊最後開發了一個專門用於處
理跨域請求代理服務的spproxy模塊，用於徹底解決js跨域問題。
下面我們將以空間的開放平台為例，簡單介紹下如何通過apache的mod_proxy、tran *** it的分流以及space的spproxy模塊來解
決該跨域問題，並簡單介紹下spproxy的一些特性、缺點及下一步的改進計劃。
空間在展現每個UWA開放模塊之前都必須請求該模塊的xml源代碼以進行解析，每個模塊的源代碼文件都是存放在act域下的/ow/uwa目錄下，那麼在

用戶空間首頁（hi域）中請求該xml文件時就會存在js跨域問題。要解決該問題，只能讓js向hi域的web伺服器請求xml文件，而hi域web服務
器則通過一定的代理機制（如mod_proxy、tran *** it分流、spproxy）向act域的web伺服器請求文件

I. js如何操作iframe的跨域問題

A域名下的頁面index.htm中內嵌了一個iframe頁面，iframe內引用的是B域名的sub-index.htm頁面，但是為了避免出
現在index.htm頁面中出現滾動條，需要明確知道sub-index.htm頁面的高度和寬度，可是sub-index.htm的頁面內容是不可控的，可能會根據不同用戶頁面大小會不一樣；問題就是如何把sub-index.htm頁面的高度和寬度傳遞給index.htm頁面？

具體解決：
1、在index.htm頁面中聲明一個js函數process(height, width);用來實現設置頁面內iframe的高度和寬度；
2、
在sub-index.htm頁面中再內嵌一個隱藏的iframe，iframe的src指向A域名下的頁面ex.htm?height=xx&
width=yy，該頁面沒有任何內容，只是用來傳遞sub-index.htm頁面載入完之後的寬度和高度這兩個數據的，頁面內js拿到request
中的參數之後直接調用parent.parent.process(height, width);完成對父頁面寬度和高度的設置；
如圖：

J. 如何用javascript 跨域獲取iframe子頁面的元素信息

跨域的話想用父頁面的js獲取iframe里的元素是不可能的。
用chrome擴展程序的話是可以的。

導航:首頁 > 編程語言 > jsiframe跨域請求

jsiframe跨域請求

與jsiframe跨域請求相關的資料

友情鏈接