Monday, October 30, 2017

How to hide iFrame

Sometimes we want to hide iframe from UI for different purposes like preload, download file, toggle effect etc. There are couple of ways to hide iFrame.
  • display:none
  • visibility:hidden
  • set height or width to zero
  • set position to offscreen
Here are explanations:
  • I don't suggest use display:none because some browsers like Firefox will skip rendering the iframe into DOM, then all logics/codes will not get executed
  • visibility:hidden will hide the iframe but will occupy the space
  • Set height and width to zero might also need set border to zero using frameBorder
  • Move iframe offscreen is an option I prefer using some class like below
             .offscreen {
                  position: absolute;
                  left: -5000px;

No comments:

Post a Comment