Resize External Website Content To Fit IFrame Width - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Resize external website content to fit iFrame width Ask Question Asked 12 years, 5 months ago Modified 6 years, 9 months ago Viewed 202k times 53

I have a webpage with 2 iFrames in it. Both of them are with fixed width and height. I am loading external websites inside them. How can I resize those external websites width to fit with the iFrame (like mobile browsers does by changing viewport)?

• javascript
• html
• css
• iframe
• web

Share Improve this question Follow asked Jul 8, 2012 at 10:38 Tahin RahmanTahin Rahman 1,20411 gold badge1212 silver badges2020 bronze badges 1

• That is not possible IMHO See this. – The Alpha Commented Jul 8, 2012 at 10:52

Add a comment |

2 Answers 2

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 82

What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.

E.g.

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe> Share Improve this answer Follow answered Jul 8, 2012 at 11:09 LucaLuca 1,1001010 silver badges44 bronze badges 4

• 2 true, but it depends on your definition of cross-browser solution. AFAIK it should work in IE>8 – Luca Commented Jul 8, 2012 at 12:19
• 10 But the iframe dimension is also scaled, not only content's dimension. – DotNet Fan Commented Mar 15, 2016 at 13:22
• 11 worked like magic! to keep the iframe in place i also added iframe{ -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; } – Michal Shulman Commented Jul 7, 2016 at 7:46
• 4 @DotNetFan Play with the iframe width and height until the scrollbar[s] go away, then scale the whole thing to the desired size. – Tag Commented May 1, 2017 at 10:05

Add a comment | 3

Tip for 1 website resizing the height. But you can change to 2 websites.

Here is my code to resize an iframe with an external website. You need insert a code into the parent (with iframe code) page and in the external website as well, so, this won't work with you don't have access to edit the external website.

• local (iframe) page: just insert a code snippet
• remote (external) page: you need a "body onload" and a "div" that holds all contents. And body needs to be styled to "margin:0"

Local:

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME> <SCRIPT> var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent,function(e) { if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px'; },false); </SCRIPT>

You need this "frm" prefix to avoid problems with other embeded codes like Twitter or Facebook plugins. If you have a plain page, you can remove the "if" and the "frm" prefix on both pages (script and onload).

Remote:

You need jQuery to accomplish about "real" page height. I cannot realize how to do with pure JavaScript since you'll have problem when resize the height down (higher to lower height) using body.scrollHeight or related. For some reason, it will return always the biggest height (pre-redimensioned).

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0"> <SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT> <DIV ID="master"> your content </DIV>

So, parent page (iframe) has a 1px default height. The script inserts a "wait for message/event" from the iframe. When a message (post message) is received and the first 3 chars are "frm" (to avoid the mentioned problem), will get the number from 4th position and set the iframe height (style), including 'px' unit.

The external site (loaded in the iframe) will "send a message" to the parent (opener) with the "frm" and the height of the main div (in this case id "master"). The "*" in postmessage means "any source".

Hope this helps. Sorry for my english.

Share Improve this answer Follow answered May 14, 2014 at 19:16 ArvyArvy 1,20222 gold badges1818 silver badges3131 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• javascript
• html
• css
• iframe
• web

or ask your own question.

• The Overflow Blog
• The ghost jobs haunting your career search
• Breaking up is hard to do: Chunking in RAG applications
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

14 How can I make an html page automatically fit mobile device screens? 5 How to embed a resized website throught an iframe? 0 Resize web page into a div 2 Resize Iframe content according to Iframe Width/Height 0 HTML CSS - How to fit the iframe content to the iframe 0 How would I resize this iFrame for my website? 0 show all the target site in small frame (html) 0 Size of the iframe contained within the link - how to resize for mobile/desktop?

Related

441 Adjust width and height of iframe to fit with content in it 7 How to resize a iframe inside the containing page? 1 fit webpage content on a fixed size iframe 1 Resize website to fit into iframe 1 Resizing an iframe's width on window resize 0 Resize iframe with javascript 1 javascript cross domain iframe resize 1 Resize iFrame Content Via JavaScript 0 CSS/HTML Dynamically Resizing Iframe through Javascript 1 How to automatically resize iframe content size when browser window resize?

Hot Network Questions

• Is there a difference between V and F in German?
• Why are my giant carnivorous plants so aggressive towards escaped prey?
• TGV Transfer at Valence
• What information can I obtain from power spectrum density (PSD) that I can't obtain from Fourier transform of a signal?
• Loop over array cyclically
• Citing volatile sources
• Why the wavefunction phases change under different environments?
• Are there convex polyhedrons with isosceles triangular faces that are also mutually non-congruent?
• Why is sorting a table (loaded with random data) faster than actually sorting random data?
• Symmetrically scale object along profile on a single axis
• Did I accidentally delete files? How can I recover them?
• expl3: fully expandable reformatting of comma-delimited text
• What language is used to represent Pokolistani in Creature Commandos?
• Can one check whether a qubit "equals" another with a single copy?
• How can I create TikZ annotations with arrows and braces for parts of a formula?
• Why are we interested in derived category?
• Is it bad practice to state the purpose of a verification code?
• How safe are password generator sites for htaccess
• Faux Random Maze Generator
• Mushy water-logged front yard, aerate?
• Getting a long term job in Schengen and ID card while on a short term visa?
• Beamer: How to align inside equations without messing up cross-references and the table of contents?
• Is it acceptable programming practice to reference a part of a slot (#[[1]], #[[2]], and #[[3]], for example)? If not, what alternative should I use?
• Nonograms that require more than single-line logic

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default