» » Javascript enable adaptive height in iframe

 

Javascript enable adaptive height in iframe

Author: bamboo06 on 1-01-2016, 14:37, views: 2220

12
Work we encountered iframe embedded in a page highly adaptive problems. Because we do not know iframe content page will be loaded high, I do not want to appear ugly scroll bars on the page, this time we can use javascript to dynamically make iframe highly adaptive.


Ready to work
We are ready to face a home a.html, and page two for embedded iframe for iframeH.html and iframeH1.html, content can easily add your own, respectively, practical applications may be Background generated content.
To demonstrate, we add the following code in the main page a.html in:
<div class="demo">
	<div class="opt_btn">
		<button onclick="getData('iframeH');">Loading Content 1</button>
		<button onclick="getData('iframeH2');">Loading Content 2</button>
	</div>
	<iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onload="setIframeHeight(this.id)"></iframe>
</div>

We must realize that each click on the two buttons, iframe load different content, iframe can not appear in the scroll bar.

javascript
First, we use javascript to dynamically change the iframe src value, namely when clicking two buttons, different content pages iframe loaded. Code button button calls the custom function respectively getData () to achieve the effect of switching the content.
function getData(ifm){ 
    document.getElementById("ifrm").src = ifm+'.html'; 
} 

Then, we focus on the contents of the iframe, because we do not know in advance the contents of iframe height, if the height of the first set iframe height value, it may appear long scroll bar when the page content, this is not what we want. Then we use javascript to dynamically obtain iframe page height, then set iframe height.
Fully loaded after the iframe onload, call setIframeHeight (), after the iframe content loading is complete, you can get iframe height value, and then re-set iframe height, the following is tidied Code:
function setIframeHeight(id) { 
    var ifrm = document.getElementById(id); 
    var doc = ifrm.contentDocument? ifrm.contentDocument:  
        ifrm.contentWindow.document; 
    ifrm.style.visibility = 'hidden'; 
    ifrm.style.height = "10px"; // reset to minimal height ... 
    ifrm.style.height = getDocHeight( doc ) + 4 + "px"; 
    ifrm.style.visibility = 'visible'; 
} 
 
function getDocHeight(doc) { 
    doc = doc || document; 
    var body = doc.body, html = doc.documentElement; 
    var height = Math.max( body.scrollHeight, body.offsetHeight,  
        html.clientHeight, html.scrollHeight, html.offsetHeight ); 
    return height; 
} 

Dom iframe operation Note: This article talked about adaptation and the previous article are operating under the same domain based on that achieved in the same domain, so if that is in a different domain is not such cross-border operations. About cross-domain iframe related to the operation site presentation please pay attention to the next article.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
24 August 2017 07:15

muskan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I can help you with .html thing as I’ve done a course on it and have a good knowledge on it. It will benefit you for dissertation writing assistance and can provide you more data in less time for your use.

<
  • 0 Comments
  • 0 Articles
30 August 2017 23:00

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Acknowledges for paper such a beneficial composition, I stumbled beside your blog besides decipher a limited announce. I want your technique of inscription... Shoulder Workouts

<
  • 0 Comments
  • 0 Articles
31 August 2017 02:44

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I simply want to tell you that I am new to weblog and definitely liked this blog site. Very likely I’m going to bookmark your blog . You absolutely have wonderful stories. Cheers for sharing with us your blog. How to Debloat

<
  • 0 Comments
  • 0 Articles
31 August 2017 06:11

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
These you will then see the most important thing, the application provides you a website a powerful important internet page: Pregnancy Miracle

<
  • 0 Comments
  • 0 Articles
21 September 2017 04:31

john

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Your work is very good and I appreciate you for doing great job and hoping for some more valuable posts! tree pruning nassau county

<
  • 0 Comments
  • 0 Articles
30 September 2017 20:57

john

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
A very excellent blog post. I am thankful for your blog post. I have found a lot of approaches after visiting your post. Party Buses NJ

<
  • 0 Comments
  • 0 Articles
4 October 2017 18:44

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. pr media release

<
  • 0 Comments
  • 0 Articles
11 October 2017 21:47

mellisa

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post. pr agencies

<
  • 0 Comments
  • 0 Articles
8 November 2017 23:24

brett

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I ‘d mention that most of us visitors are really endowed to exist in a fabulous place with very many wonderful individuals with very helpful things. case study switchbox

<
  • 0 Comments
  • 0 Articles
4 December 2017 07:23

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What an inspiring article this was to read. I certainly did enjoy reading this very much. Some of the information here will be extremely helpful for my work. 2nd mortgage loans

<
  • 0 Comments
  • 0 Articles
6 December 2017 17:36

dfgfgsdsf

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Swiss traditional smart watch is a combination of rolex replica watches high-tech innovation and the traditional Swiss watchmaking process. It is a combination of replica watches uk modern and classical, and even a bridge linking Silicon Valley and Switzerland. Instead of using the digital screen of fake rolex watches a typical smart watch on the dial of the Swiss traditional smart watch, Constance and Apex held the traditional Swiss craftsmanship and displayed the time with a pointer to uk replica watches preserve the classic beauty.

<
  • 0 Comments
  • 0 Articles
18 December 2017 18:03

Allen

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
It may appear long scroll bar when the page content, this is not what we want. Then we use javascript to dynamically obtain iframe page height, then set iframe height. 200-125 Dumps Practice Exam Questions

Information
Comment on the news site is possible only within (days) days from the date of publication.