html iframe 元素之間的呼叫

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>父頁面</title>
 6     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
 7     </head> 
 8     < 
body> 
 9         <input id="username" name="username" value="zhangsan" />
10         <button onclick="getIframeEle();">change iframe1 from js</button>
11         <button onclick="getIframeEle2();">change iframe1 from jquery</button>
12         </br>
13         < 
iframe id="t_sub" name="myFrame"  src="./sub.html"> </iframe> 
14         <iframe id="t_sub2" name="myFrame2"  src="./sub2.html"> </iframe> 
15     <script type="text/javascript">
16     function getIframeEle(){ //通過js父頁面操作子頁面中的元素
17         var childdoc = document.getElementById( 
"t_sub").contentWindow.document;
18         var childele = childdoc.getElementById("tname");
19         childele.value = "chang from parent" + new Date();
20         console.log(childele.value);  
21     }
22     function getIframeEle2(){//通過jquery父頁面操作子頁面中的元素
23         //console.log($(document.frames("t_sub").document)); 
24         var childele = $(document.getElementById('t_sub').contentWindow.document).find("#tname");
25         childele.val("jquery iframe");
26         console.log(childele.val());
27     }
28 
29 
30     // 計算頁面的實際高度，iframe自適應會用到
31   function calcPageHeight(doc) {
32       var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
33       var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
34       var height  = Math.max(cHeight, sHeight)
35       return height
36   }
37   var ifr = document.getElementById('t_sub2')
38   ifr.onload = function() {
39       var iDoc = ifr.contentDocument || ifr.document
40       var height = calcPageHeight(iDoc)
41       ifr.style.height = height + 'px'
42   }
43     </script>
44     </body>
45 </html>

html iframe 元素之間的呼叫

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5

Phaser遊戲框架與HTML Dom元素之間的通訊互動

本想按照PHASER的HTML Dom元素官方例項：http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q= 來建立HTML DOM元素，但this.add.dom 一直提示錯誤，無奈直接用HTML5的語法來建

Phaser遊戲框架與HTML Dom元素之間的通信交互

con pen scrip keyword params dom html dom att attr 本想按照PHASER的HTML Dom元素官方實例：http://labs.phaser.io/index.html?dir=game%20objects/dom%20el

html iframe 子頁面呼叫父頁面的方法

還是附上程式碼吧。不多說，方便日後檢視父頁面程式碼：<!DOCTYPE html> <html> <head> <title>parents<

關於iframe的父子視窗方法、元素之間的呼叫

/** * 父頁面從子頁面獲取到name屬性，遍歷設定為不可編輯 * @type {NodeList} */ var medCheck = window.frames["mFrame"].document.getElementsByName("medChe

如何處理html中的內聯元素之間水平空隙

bubuko image block css img 分享圖片 ima add .com 寫HTML時把需要緊挨著的內聯元素寫在一行，設置其父容器的font-size為0，再設置內聯元素的字體大小，例如： <!DOCTYPE html> <html la

iframe頁面之間元素獲取與方法調用

spa idt cin color nbsp mil cell ram AD 父頁面與子頁面之間的元素獲取與方法調用：1、JS父調子子調父元素window.frames[iframe的name屬性值];① window.parent.document.getElementB

5種方法去掉HTML中Inline-Block元素之間的空白

display: inline-block 是個很好用的樣式，當你需要多個塊狀元素在同一行時你的第一反應就是它。有了它，你不在需要讓這些元素去“block”和“float”，然後再去處理由於“float”引起的佈局問題。但有一個問題，當使用inline-block時，HTML元素之間的空白會顯示在頁面上，這讓

HTML的總結及展示（1）（錨點、a元素新增超連結href、img元素、iframe元素、HTML5新增的拖放API）

之前接觸過一些前端內容，但是時間長了早就忘記了，最近開始系統的學習，做一下總結，方便日後使用。我把總結內容展示在了自己的伺服器上，歡迎大家檢視網址http://39.106.170.146/html/summary/summary01.html，進入後·按下F12鍵或者右

iframe框架之間js方法相互呼叫及資料傳遞

HTML元素之間有間隙原因以及解決辦法

產生原因：空白間隙主要出現在行內元素中（如li、img），是由於換行符、tab（製表符）、空格等不可見字元引起的。解決辦法：（1）刪除行內元素之間的換行符、tab（製表符）、空格等字元寫

【javascript】iframe父子兄弟之間呼叫傳值(contentWindow && parent) (推薦)

iframe的呼叫包括以下幾個方面：（呼叫包含html dom，js全域性變數，js方法）主頁面呼叫iframe； iframe頁面呼叫主頁面；主頁面的包含的iframe之間相互呼叫；主要知識點 1：document.getElementById("ii

html和body之間空白解決,以及元素預設margin和padding

在研究元素定位的時候，突然注意到HTML和BODY之間還是有空白的。找了下這個問題的解決方法，如下：首先，單純設定body是不行的。需要設定全部元素。於是引出一個問題，就是HTML中的元素都是有預設margin或padding的。 <style type="t

【html】塊級元素、內聯元素之間的轉換，以及高度適應

一般的HTML元素分兩種：塊級元素、內聯元素怎麼區分他們呢？最簡單的方法就是：塊級元素都是獨佔一行，也就是說如果它後面再跟一個元素（不管是塊級還是內聯）的話，那個元素都是另起一行的很好！明白了這個我們再來說說日常開發過程中經常碰到的一種情況。一個內聯

關於css中父元素與子元素之間margin-top的問題

可用技術分享一個 src 文檔流重疊 cond one left 之前在使用經常遇到下面的問題： html： 1 <div class="top"> 2 <div class="one">I‘m the first!</div&

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

HTML所有元素的分類

.com ble ges .org title scrip cnblogs not use 根據HTML5.1推薦標準，HTML元素主要分為7大類： metadata content（原數據的內容） flow content（流數據的內容） sectioning cont

vue組件中使用iframe元素

doc ntb -i 鏈接 span scope ace com absolut 需要在本頁面中展示vue組件中的超鏈接，地址欄不改變的方法: <template> <div class="accept-container">

同級兄弟元素之間的CSS進行控制

之間改變 span 匹配 css class ont 進行表示臨近兄弟：用 + 表示，只匹配該元素後邊的第一個同級元素。普通兄弟：用 ~ 表示，匹配該元素後邊的所有同級元素。例子：　　<style> 　　　　div#aa p{ 　　　　　　

HTML培訓課程-------Day01（HTML基本元素）

small 圖片英文十六進制 src 設置描述 face 排列 HTML基礎 HTML的基本結構 HTML標記的格式 (1)<標記名稱>單一型,無設置值的。如：<br> (2)<標記名稱屬性=”屬性值”>

html iframe 元素之間的呼叫

相關推薦