CN104391909A - 一种iframe跨域高度自适应的方法 - Google Patents

一种iframe跨域高度自适应的方法 Download PDF

Info

Publication number
CN104391909A
CN104391909A CN201410655698.0A CN201410655698A CN104391909A CN 104391909 A CN104391909 A CN 104391909A CN 201410655698 A CN201410655698 A CN 201410655698A CN 104391909 A CN104391909 A CN 104391909A
Authority
CN
China
Prior art keywords
page
iframe
height
domain
cross
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201410655698.0A
Other languages
English (en)
Inventor
丁继锋
徐震宇
孙傲冰
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201410655698.0A priority Critical patent/CN104391909A/zh
Publication of CN104391909A publication Critical patent/CN104391909A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及WEB开发技术领域，具体涉及一种IFRAME跨域高度自适应的方法。本发明方法通过在域A下设置一个中转页面a，嵌入被嵌套B域下的页面b中，而b页面又嵌入在域A下的主界面m中。当浏览器访问页面m时载入页面b，触发页面b的onload事件获取自身页面的高度，然后页面b载入页面a，并将其高度做为参数赋值给页面a的location对象，页面a就可以通过location.hash获取页面b的高度。本发明解决了在WEB开发过程中，通过IFRAME跨域嵌入页面时，IFRAME高度不能自动适应的问题，可广泛应用于WEB开发中。

Description

一种IFRAME跨域高度自适应的方法
技术领域
本发明涉及WEB开发技术领域，具体涉及一种IFRAME跨域高度自适应的方法。
背景技术
在WEB开发过程，经常会遇到使用IFRAME来嵌入其它的页面内容，同域下通过JavaScript对其高度设置很容易操作。但是在跨域的情况下，由于客户端JavaScript受浏览器完全策略的限制，被嵌套的页面在获取或修改父页面的DOM属性时会出现权限不足的问题，也就是说JavaScript只能操作同域下的属性，而无法跨域操作。
发明内容
本发明解决的技术问题在于提供一种IFRAME跨域高度自适应的方法；解决跨域操作问题。
本发明解决上述技术问题的技术方案是：
所述的方法包含以下几个步骤：
步骤一、在域A下创建主页面m，和中转页面a；
步骤二、在域B下创建嵌套的页面b，添加一个隐藏的IFRAME，并指向页面a；
步骤三、在主页面m中添加一个IFRAME，嵌入页面b；
步骤四、在主页面m中通过中转页面a传递页面b的高度，设置页面m中IFRAME的高度；
当访问页面m时，页面高度可随着嵌入内容的高度而自动适应。
所述的步骤一中去掉中转页面a中<BODY>标签内的所有HTML代码。
所述的步骤二中，在域B下创建一个将要嵌入的页面b，添加一个隐藏的IFRAME，宽度高度设置为0；然后在页面加载完成时，JS获取页面的高度进行保存，并设置隐藏的IFRAME的src属性为域A下中转页面a的链接，同时将页面b的高度作为参数追加到链接后面进行传递。
所述的步骤三中，在步骤一所创建的页面m中添加一个IFRAME标签，高度设置为自动，其src属性指向将要嵌入的步骤二中所创建的页面b的访问链接。
所述的步骤四中，在中转页面a加载时通过JS获取页面m中的IFRAME对象，再获取域B下的嵌套页面b中隐藏IFRAME的location对象，进而获取其hash值，即为页面b的高度，再赋值给页面m中IFRAME的高度。
本发明通过中转页面a获取到嵌套页面b的高度，以参数形式传递给主页面m，设置其IFRAME的高度，使其高度随内容自动适应。本发明很好的回避了JavaScript跨域操作的权限问题，进而解决了跨域操作的问题。
附图说明
下面结合附图对本发明进一步说明：
附图是本发明方法流程框图。
具体实施方式
如图1所示，本发明具体包含以下几个步骤：
步骤一：在域A(www.A.com)下创建访问主页面m和中转页面a，去掉页面a中<BODY>标签内的所有HTML代码；
关键代码：
iframe主页面：m.html
<iframe id＝″iframe_m″name＝″iframe m″src＝″″width＝″100％″height＝″auto″scrolling＝″no″frameborder＝″0″></iframe>
步骤二：在域B(www.B.com)下创建一个将要嵌入的页面b，添加一个隐藏的IFRAME，宽度高度设置为0，然后在页面加载完成时，JS获取页面的高度进行保存，并设置隐藏的IFRAME的src属性为域A下中转页面a的链接，同时把页面b的高度作为参数追加到链接后面进行传递；
关键代码：
步骤三：在步骤一所创建的页面m中添加一个IFRAME标签，高度设置为自动，其src属性指向将要嵌入的步骤二中所创建的页面b的访问链接；
关键代码：
<iframe id＝″iframe_m″name＝″iframe_m″src＝″www.B.com/b.html″width＝″100％″height＝″auto″scrolling＝″no″frameborder＝″0″></iframe>
步骤四：在中转页面a加载时通过JS获取页面m中的IFRAME对象，再获取域B下的嵌套页面b中隐藏IFRAME的location对象，进而获取其hash值，即为页面b的高度，再赋值给页面m中IFRAME的高度；
关键代码：

Claims (7)

1.一种IFRAME跨域高度自适应的方法，其特征在于：所述的方法包含以下几个步骤：
步骤一、在域A下创建主页面m，和中转页面a；
步骤二、在域B下创建嵌套的页面b，添加一个隐藏的IFRAME，并指向页面a；
步骤三、在主页面m中添加一个IFRAME，嵌入页面b；
步骤四、在主页面m中通过中转页面a传递页面b的高度，设置页面m中IFRAME的高度；
当访问页面m时，页面高度可随着嵌入内容的高度而自动适应。
2.根据权利要求1所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤一中去掉中转页面a中<BODY>标签内的所有HTML代码。
3.根据权利要求1所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤二中，在域B下创建一个将要嵌入的页面b，添加一个隐藏的IFRAME，宽度高度设置为0；然后在页面加载完成时，JS获取页面的高度进行保存，并设置隐藏的IFRAME的src属性为域A下中转页面a的链接，同时将页面b的高度作为参数追加到链接后面进行传递。
4.根据权利要求2所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤二中，在域B下创建一个将要嵌入的页面b，添加一个隐藏的IFRAME，宽度高度设置为0；然后在页面加载完成时，JS获取页面的高度进行保存，并设置隐藏的IFRAME的src属性为域A下中转页面a的链接，同时将页面b的高度作为参数追加到链接后面进行传递。
5.根据权利要求1至4任一项所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤三中，在步骤一所创建的页面m中添加一个IFRAME标签，高度设置为自动，其src属性指向将要嵌入的步骤二中所创建的页面b的访问链接。
6.根据权利要求1至4任一项所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤四中，在中转页面a加载时通过JS获取页面m中的IFRAME对象，再获取域B下的嵌套页面b中隐藏IFRAME的location对象，进而获取其hash值，即为页面b的高度，再赋值给页面m中IFRAME的高度。
7.根据权利要求5所述的IFRAME跨域高度自适应的方法，其特征在于：所述的步骤四中，在中转页面a加载时通过JS获取页面m中的IFRAME对象，再获取域B下的嵌套页面b中隐藏IFRAME的location对象，进而获取其hash值，即为页面b的高度，再赋值给页面m中IFRAME的高度。
CN201410655698.0A 2014-11-17 2014-11-17 一种iframe跨域高度自适应的方法 Pending CN104391909A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410655698.0A CN104391909A (zh) 2014-11-17 2014-11-17 一种iframe跨域高度自适应的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410655698.0A CN104391909A (zh) 2014-11-17 2014-11-17 一种iframe跨域高度自适应的方法

Publications (1)

Publication Number Publication Date
CN104391909A true CN104391909A (zh) 2015-03-04

Family

ID=52609813

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410655698.0A Pending CN104391909A (zh) 2014-11-17 2014-11-17 一种iframe跨域高度自适应的方法

Country Status (1)

Country Link
CN (1) CN104391909A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105930378A (zh) * 2016-04-13 2016-09-07 北京思特奇信息技术股份有限公司 一种从后台服务端处理html页面嵌套的方法及系统
CN105930392A (zh) * 2016-04-15 2016-09-07 北京思特奇信息技术股份有限公司 一种基于消息传输的跨域iframe高度自适应方法及其系统
CN106886392A (zh) * 2015-12-16 2017-06-23 天脉聚源（北京）科技有限公司 一种移动端页面高度固定方法及系统
CN107038194A (zh) * 2016-11-17 2017-08-11 阿里巴巴集团控股有限公司 一种页面跳转方法和装置
CN107229498A (zh) * 2017-05-31 2017-10-03 郑州云海信息技术有限公司 一种跨域实现javascript加载本地html文件的方法
CN109213946A (zh) * 2017-06-30 2019-01-15 北京国双科技有限公司 iframe跨域高度自适应方法及装置
CN109960765A (zh) * 2019-02-27 2019-07-02 深圳点猫科技有限公司 一种基于编程语言对网页进行跨域通信的方法、电子设备
CN110209966A (zh) * 2019-04-15 2019-09-06 优信拍（北京）信息科技有限公司 一种网页刷新方法、网页系统及电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101615179A (zh) * 2008-06-25 2009-12-30 国际商业机器公司 用于Web应用的跨域交互的方法和系统
CN102184220A (zh) * 2011-05-06 2011-09-14 中兴通讯股份有限公司 跨域页面显示控制方法及装置
CN103023790A (zh) * 2012-12-31 2013-04-03 北京京东世纪贸易有限公司 一种用于实现跨域交互访问的方法和系统

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101615179A (zh) * 2008-06-25 2009-12-30 国际商业机器公司 用于Web应用的跨域交互的方法和系统
CN102184220A (zh) * 2011-05-06 2011-09-14 中兴通讯股份有限公司 跨域页面显示控制方法及装置
CN103023790A (zh) * 2012-12-31 2013-04-03 北京京东世纪贸易有限公司 一种用于实现跨域交互访问的方法和系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
SNANDY: "《www.cnblogs.com/snandy/p/3900016.html》", 12 August 2014 *

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106886392A (zh) * 2015-12-16 2017-06-23 天脉聚源（北京）科技有限公司 一种移动端页面高度固定方法及系统
CN105930378A (zh) * 2016-04-13 2016-09-07 北京思特奇信息技术股份有限公司 一种从后台服务端处理html页面嵌套的方法及系统
CN105930378B (zh) * 2016-04-13 2019-05-24 北京思特奇信息技术股份有限公司 一种从后台服务端处理html页面嵌套的方法及系统
CN105930392A (zh) * 2016-04-15 2016-09-07 北京思特奇信息技术股份有限公司 一种基于消息传输的跨域iframe高度自适应方法及其系统
CN107038194A (zh) * 2016-11-17 2017-08-11 阿里巴巴集团控股有限公司 一种页面跳转方法和装置
CN107038194B (zh) * 2016-11-17 2020-12-15 创新先进技术有限公司 一种页面跳转方法和装置
CN107229498A (zh) * 2017-05-31 2017-10-03 郑州云海信息技术有限公司 一种跨域实现javascript加载本地html文件的方法
CN109213946A (zh) * 2017-06-30 2019-01-15 北京国双科技有限公司 iframe跨域高度自适应方法及装置
CN109960765A (zh) * 2019-02-27 2019-07-02 深圳点猫科技有限公司 一种基于编程语言对网页进行跨域通信的方法、电子设备
CN110209966A (zh) * 2019-04-15 2019-09-06 优信拍（北京）信息科技有限公司 一种网页刷新方法、网页系统及电子设备
CN110209966B (zh) * 2019-04-15 2022-03-11 优信拍（北京）信息科技有限公司 一种网页刷新方法、网页系统及电子设备

Similar Documents

Publication Publication Date Title
CN104391909A (zh) 一种iframe跨域高度自适应的方法
WO2012125696A3 (en) Methods and systems for one browser version to use a rendering engine of another browser version for displaying information
CN104866347A (zh) 一种动态加载js和css文件的方法
Mukhopadhyay et al. Erratum: OsTCP19 influences developmental and abiotic stress signaling by modulating ABI4-mediated pathways
Schrock The 5W’s of website evaluation
Manton et al. Hypermethylation of the 5′ CpG island of the gene encoding the serine protease Testisin promotes its loss in testicular tumorigenesis
Hao et al. The endocrine disruptor mono-(2-ethylhexyl) phthalate promotes adipocyte differentiation and induces obesity in mice
Wang et al. Progresses in research of emulsion polymerization for oilfield exploitation
Stone et al. Changes in Momentary Experience Were Associated With the Onset of the COVID Pandemic
Bray et al. Erratum: NIH working group report-using genomic information to guide weight management: from universal to precision treatment
Zhu et al. Corrigendum: A multi-omic map of the lipid-producing yeast Rhodosporidium toruloides
LaKind et al. Correction: use of nhanes data to link chemical exposures to chronic diseases: a cautionary tale
Yi et al. DNA repair by reversal of DNA damage
Xiaozhang Optimization and application of perforation scheme in light oil reservoirs of Bohai oilfield
Srinivasaiah et al. Correction: Usual Populations, Unusual Individuals: Insights into the Behavior and Management of Asian Elephants in Fragmented Landscapes
Rao et al. Correction: N-Acetylglucosamine Kinase, HXK1 Is Involved in Morphogenetic Transition and Metabolic Gene Expression in Candida albicans
Matzek Correction: Trait Values, Not Trait Plasticity, Best Explain Invasive Species' Performance in a Changing Environment
Suberu et al. Correction: Anti-Plasmodial Polyvalent Interactions in Artemisia annua L. Aqueous Extract–Possible Synergistic and Resistance Mechanisms
Lee Abstract not submitted for online publication
cite Gut Dammann K, Khare V, Gasche C. Tracing PAKs from GI inflammation to cancer. Gut 2014; 63: 1173–84. This article is now Open Access, under CC-BY NC license.
Pietzsch et al. ImgLib2—generic image processing in Java
Barac et al. Correction: I1 Imidazoline Receptor: Novel Potential Cytoprotective Target of TVP1022, the S-Enantiomer of Rasagiline
Pulicharla et al. Behavior and fate of natural and engineered nanomaterials in water
Salunke et al. List of Reviewers Journal of Orthopaedic Case Reports 2016 July-Aug: 6 (3): Page 94
Trial www. aje. oxfordjournals. org

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20150304

WD01 Invention patent application deemed withdrawn after publication