How to include javascript variables inside an iframe container in a more convenient way

Question

I am a complete newbie to Javascript and Here's the code on which I require some help.

<!DOCTYPE html>
<html><head>
<title>Web Page Design</title></head>
<body>
<script type="text/javascript">
<!--
 
 var viewportwidth;
 var viewportheight;
  
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
  
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
  
 // older versions of IE
  
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=380&height=500&small_header=true&dat_adapter_container_width=true&hide_cover=true&show_facepile=false&appId" width="380" height="5000" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</body>
</html>

I wanted to place the variables viewportwidth and viewportheight to be placed inside link at points height and width and also outside the link in the iframe container at height and width so that the iframe container gets same size as screen

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=viewportwidth&height=viewportheight&small_header=true&dat_adapter_container_width=true&hide_cover=true&show_facepile=false&appId" width=viewportwidth height= viewportheight style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

Like this. So , if anyone know how to do this please post the Answer ...

Explicitly targetting versions of IE older than IE6 in 2021 is an … odd choice. — Quentin, Aug 31 '21 at 12:43

Igor Lima · Accepted Answer · 2021-08-31T14:48:02.633

You need to programatically set the width and the height of the iframe element.

Here is your code modified and working:

    <!DOCTYPE html>
    <html><head>
    <title>Web Page Design</title></head>
    <body>
    
    <iframe class='viewport-iframe' src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=380&height=500&small_header=true&dat_adapter_container_width=true&hide_cover=true&show_facepile=false&appId" width="380" height="5000" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

    <script type="text/javascript">
    
document.addEventListener("DOMContentLoaded", function() {
         
     var viewportwidth;
     var viewportheight;
      
     // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
      
     if (typeof window.innerWidth != 'undefined')
     {
          viewportwidth = window.innerWidth,
          viewportheight = window.innerHeight
     }
      
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
     
     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
           viewportwidth = document.documentElement.clientWidth,
           viewportheight = document.documentElement.clientHeight
     }
      
     // older versions of IE
      
     else
     {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
     }
     
     
    document.body.append('Your viewport width is '+viewportwidth+'x'+viewportheight);
    
    document.querySelector(".viewport-iframe").width = viewportwidth;
    document.querySelector(".viewport-iframe").height = viewportheight;
    document.querySelector(".viewport-iframe").src = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width="+viewportwidth+"&height="+viewportheight+"&small_header=true&dat_adapter_container_width=true&hide_cover=true&show_facepile=false&appId";
    
});
     

    </script>
    </body>
    
    
    </html>

I added a class to your Iframe element viewport-iframe, so then it is easy to identify it with JavaScript and modify it programatically.

Edit: Added code to document loaded to prevent rendering issues.

Note: Always place your javascript code after your HTML structure code, so that it will always work properly with the elements on your page.

Edited my answer, you can try it now. I actually forgot, but in order to work with elements on the page, you always need to put your javascript code inside an javascript event that detects when your page has already done fully loading, just like I did on `document.addEventListener("DOMContentLoaded", function() {`... — Igor Lima, Aug 31 '21 at 14:42
Also changed one line that was your `document.write...` was overriding all of the page contents, wich was causing some javascript bugs on not finding the elements. Now everything works fine. — Igor Lima, Aug 31 '21 at 14:49
Thank You Veryyyyyyyyyyyyyyyyyyy much Bro. It Works like a Charm. Thank You Very Very Much......... I Don't know how to express my Joy. :)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) — Scania_16, Aug 31 '21 at 14:49

How to include javascript variables inside an iframe container in a more convenient way

1 Answers1