跨域Iframe的一些操作

阿新 • • 發佈：2019-01-16

導語：

在實際開發過程中經常會遇到一些跨域問題，如通過iframe嵌入一個跨域的頁面。這個問題也是在面試時，那些專案經理經常喜歡提及的，因此做一個小Demo以供大家參考。

首先建立一個遠端伺服器上的頁面test.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>遠端頁面</title>
    <script type="text/javascript">
        function f1() {
            var userName = document.getElementById("userName");
            var pwd = document.getElementById("pwd");
            var btnAlert = document.getElementById("btnAlert");

            btnAlert.onclick = function () {
                if (userName.value == "china" && pwd.value == "china") {
                    alert("登入成功");
                } else {
                    alert("登入失敗");
                }
            }
        }

        window.onload = function () {
            document.getElementById("btnF2").onclick = function () {
                window.parent.f2();
            };
            f1();
        }

        function f3() {
            alert("遠端伺服器上f3函式執行成功");
        }

        
    </script>
</head>
<body>
    使用者名稱：<input type="text" id="userName" /><br />
    密碼：<input type="text" id="pwd" /><br />
    <input type="button" value="提交" id="btnAlert" /><input type="button" id="btnF2" value="呼叫父級頁面中的f2方法" />
</body>
</html>

本地的頁面parent.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>本地頁面</title>
    <script type="text/javascript">
        window.onload = function () {
            //獲得Iframe的頂級節點window
            var country = document.getElementById("country").contentWindow;
            //獲得iframe中的兩個文字框
            var userName = country.document.getElementById("userName");
            var pwd = country.document.getElementById("pwd");

            var btnLogin = document.getElementById("btnLogin");

            //操作遠端頁面中的登入
            btnLogin.onclick = function () {
                if (userName.value == "china" && pwd.value == "china") {
                    alert("登入成功");
                } else {
                    alert("登入失敗");
                }
            }

            //呼叫遠端頁面的f3方法
            document.getElementById("btnF3").onclick = function () {
                country.f3();
            };
        }

        function f2() {
            alert("iframe中遠端伺服器頁面呼叫父級頁面中的函式成功");
        }
    </script>
</head>
<body>
    <iframe id="country" name="cc" src="http://www.chinatt315.org.cn/2010315tps/test.html"></iframe>
    <input type="button" value="呼叫遠端頁面的f3方法" id="btnF3" /><br />
    <input type="button" value="操作遠端頁面中的登入" id="btnLogin" />
</body>
</html>

總結：在本地獲得遠端頁面的頂級元素window是一個關鍵document.getElementById("iframeId").contentWindow，遠端頁面獲得其父頁面的window物件也是一個關鍵點window.parent，然後其他的程式設計與平常的程式設計沒有什麼異樣。

跨域Iframe的一些操作

導語：在實際開發過程中經常會遇到一些跨域問題，如通過iframe嵌入一個跨域的頁面。這個問題也是在面試時，那些專案經理經常喜歡提及的，因此做一個小Demo以供大家參考。首先建立一個遠端伺服器上的頁面test.html: <!DOCTYPE html> &l

操作跨域iframe 裡div

iframe裡的元素無法用css來直接控制，不管是同域還是跨域。可選方法：父window接收資料： window.addEventListener('message',function(event){　　console.log(event.data);}) 父元素向子元素髮送資料： iframe

關於ajax跨域的一些解決方案

dst control 關於請求 method request 進行前端請求方式 1、JSONP方式解決跨域問題 jsonp解決跨域問題是一個比較古老的方案(實際中不推薦使用),當然，在實際項目中如果要使用JSONP,一般會使用JQ等對JSONP進行了封裝的

js如何獲取跨域iframe 裏面content

獲取方法 data- keyword -c iframe ring ref key 每天學習一點點編程PDF電子書、視頻教程免費下載：http://www.shitanlife.com/code 其中src可能存在跨域。現有的獲取方式 var test

跨域 iFrame 的自動化

同源策略會阻止 Appium 對和父頁面不同域的 iFrame 進行自動化測試。子域名的解決方案如果父頁面和 iFrame 使用同一個 domain (比如 site.com 和 shop.site.com)，你可以在父頁面和 iFrame 裡將

對跨域的一些認識

跨域，這個名詞已經很多次映入我的視野，今天決定要好好的瞭解一番。　　由於http協議是無狀態的，伺服器不會記住與瀏覽器之間的會話，所以一般是通過伺服器與瀏覽器是通過cookies來記錄網站登陸使用者的基本資訊，之所以使用者登入成功之後就不需要再進行登入了，是因為瀏覽器的cookies中存著使用者的與伺

跨域 iframe

我的跨域很簡單，是用 <iframe></iframe> 來做的。為什麼會用到跨域？因為公司業務規定，所有的操作按鈕在最上邊，而且是固定死的都有什麼（CRUD），並且每個業務都一樣，只是通過許可權來限定他

跨域iframe通訊

前段時間，在重構業務相關SDK對接方案中，涉及到跨域Iframe通訊的場景，最終採取的方案是window.postMessage , 這裡總結一下該方案的應用場景及其注意事項。該API旨在安全的實現跨源通訊。通常情況下，兩個頁面之間的指令碼，只有在協議主機名和埠號完全相同

父、子頁面同域、跨域時互相操作dom元素

注意，同域或跨域下，父頁面要操作子頁面的dom元素，必須要等到子頁面載入完畢，否則獲取不了子頁面的document，因此我們需要監聽子頁面的onload事件，或者監聽父頁面的onload事件也可以

JS跨域訪問操作iframe

很多人一直都有個想法，要是可以隨心所欲的操作iframe就好了。這樣靜態頁面也就有了相當於後臺動態頁面php,jsp,asp中include，require實現統一多頁面佈局的能力。通過Javascript的幫忙我們可以像後臺一樣動態載入操作iframe物件屬性src指向

不同域名/二級域名之間的iframe跨域操作

1、什麼是跨域：說白點就是post、get的url不是你當前的網站，域名不同。例如在aaa.com/a.html裡面，表單的提交action是bbb.com/b.html。不僅如此，www.aaa.com和aaa.com之間也屬於跨域，因為www.aaa.com是二級域

最近的一些總結(滑動卡頓，vue 載入前加loading，iframe跨域)

最近在切前端頁面，寫一些前端特效，做一個下拉重新整理的時候，下拉卡頓，加了一個 css 屬性， .recommend .swiper-wrapper{ -webkit-overflow-scrolling: touch;//該屬性隨著手指離開還會保持滾動 } 還有

CSS完美實現iframe高度自適應（支持跨域）

真的高度 org lns nal aid .org bsp 方法 Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭

iframe 跨域調用父級方法的方案

nbsp head java math tex append 跨域 undefined utf-8 一、如果高層域名相同的話，可以通過document.domain來實現跨域訪問例如：父級域名：localhost:8080 子級域名：localhost:9090 那麽可

【HAVENT原創】前端跨域一站式登錄實現 ( iframe + window.name )

不同的 rip 控制臺 tool 數據信息 als 前端 reat proxy 從網上搜集了一些資料，window.name 傳輸技術，關於window.name的這樣一個特性：name 值在不同的頁面（甚至不同域名）加載後依舊存在，並且可以支持非常長的 name 值（2M

用document.activeElement解決iframe跨域問題

監聽 app frame 使用 doc win user interval layer iframe裏面一般都會使用別人的URL，沒有很多交互，使用document.activeElement可以對iframe進行事件監聽。使用下面的類進行測試： var IframeO

一波在canvas下載跨域圖片的坑裡瘋狂試探的操作

常見的一些檔案上傳元件都會在上傳後附加一個可點選的檔名，如圖中的xxx.png，這個檔名由<a>標籤包裹，業務需求要求點選xxx.png下載對應的檔案，而常見檔案上傳元件的效果都是跳轉到連結頁面。解決方法是利用preventDefault()方法清除元件中

iframe 跨域訪問session/cookie丟失問題解決方法

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

CSS完美實現iframe高度自適應（支援跨域）

Iframe的強大功能偶就不多說了，它不但被開發人員經常運用，而且黑客們也常常使用它，總之用過的人知道它的強大之處，但是Iframe有個致命的“BUG”就是iframe的高度無法自動適應，這一點讓很多人都頭疼萬分。百度或是谷歌一下，確實很多解決方法，但嘗試一下，會發現問題很多：瀏覽器相容性差，不能自

Javascript 使用postMessage對iframe跨域傳值或通訊

實現目標：兩個網站頁面實現跨域相互通訊當前例子依賴於 jQuery 3.0 父頁面程式碼：www.a.com/a.html <iframe id="myIframe" src="http://www.b.com/b.html"></iframe> <script&g

跨域Iframe的一些操作

相關推薦