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;
             }