function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Uttpal chandraUttpal chandra 

How to create dynamic iframe using javascript?

Hi all,
Right now I am creating a pop on detail page button.Everything is fine except it's height can anyone help me on how to create a dynamic iframe using javascript?

Here is my code.
(function() {
    var width = 700;
    var height = 515;
    var title = "Dialog title here";

    var box = new SimpleDialog("salesforce" + Math.random(), true);
    box.setTitle(title);
    box.displayX = true;
    box.isMovable = false;
    box.createDialog();
    box.setWidth(width);
    // set your html content here
    box.setContentInnerHTML(
      '<iframe src="/apex/toastmessage?Id={!Account.Id}" style="border:none;" width="100%" height="'+ (height - 30)+'px" />'
    );
    //set the height of the modal
     box.dialog.children[1].style.height = height + 'px';
    box.show();

    //if displayX is set to true, then override standard close event by this code
    box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() {
      box.hide();
      // you can add code to reload the page or redirect to another page 
    };
    //optional : add this to close the modal onclick of the overlay background
    box.background.addEventListener('click', function() {
      box.hide();
    });
    
    // if you want to be able to close the modal from the Visualforce page
    window.addEventListener('message', function(event){
      if (event.data === 'close'){
        box.hide();
      }
    });
})();

Thanks in advance
Saravanan RajarajanSaravanan Rajarajan
Hi Uttpal,

The height of the inline frame, expressed either as a percentage of the total available vertical space (for example height="50%"), or as the number of pixels (for example, height="300px"). If not specified, this value defaults to 600px.

Try this Code:
 
<iframe height="600px" id="theIframe" name="theIframe" src="/apex/toastmessage?Id={!Account.Id}" width="100%"></iframe>

or else
 
<apex:page sidebar="false">
    <apex:iframe src="/apex/toastmessage?Id={!Account.Id}" id="theFrame" />
    <script>document.getElementById('theFrame').height = window.innerHeight - 220;</script>
</apex:page>

or else
 
<apex:page id="hompage" title="Homepage Visualforce"
    controller="" showheader="false" sidebar="false" cache="false" standardStylesheets="false">
<script type="text/javascript">
    function resizeFrame() {
	var parentIFrame = parent.document.getElementById('homepageComponentiFrameId');
            if ( parentIFrame != null ) {
                 if ( document.body.clientHeight != null && document.body.clientHeight > 0 )
                      parentIFrame.height = document.body.clientHeight;
                  else {
                       parentIFrame.height = document.height+"px";
                  }
              }
         }
</script>
     <body onload="resizeFrame();">
your page contents here...
</body>
</apex:page>

Please mark it best answer if it helps you.
Nik shNik sh
Hi Uttpal,


<apex:page showHeader="false">
<apex:pageBlock >
<apex:iframe src="https://www.salesforce.com" scrolling="true" id="theIframe"/>
</apex:pageBlock> </apex:page>

Thanks.
Uttpal chandraUttpal chandra
Thanks to both of you but here i am not using vf page to display iframe.
I am using javascript to display Vf page.
Nik shNik sh
Hi Uttpal,

You can see the below link:
https://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript
Ajay K DubediAjay K Dubedi
Hi Uttpal,
Please try the below code and let me know if this works for you. If still need modifications do let me know.

<!DOCTYPE html>
<html>
<body>
<iframe id="myFrame" style="height:380px;width:100%"></iframe>
<p>Click button to create new frame.</p>
<button onclick="createNewFrame()">Try it</button>
    <script type="text/javascript">
        function createNewFrame() {
            var ifrm = document.createElement("iframe");
            ifrm.setAttribute("src", "http://google.com/");
            ifrm.style.width = "640px";
            ifrm.style.height = "480px";
            document.body.appendChild(ifrm);
        }
    </script> 
</body>
</html>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
kaushal sharma 33kaushal sharma 33
https://sarkariline.com/


https://sarkarifoam.com

https://realtimenews.org.in/jio-rockers-hd-telugu-tamil-movies-download-2020-free

https://realtimenews.org.in/9xmovies/
kaushal sharma 33kaushal sharma 33


<a href="https://sarkariline.com/">sarkari result</a>



<a href="https://sarkarifoam.com/">sarkari result</a>



<a href="https://sarkariline.com/">sarkari results</a>



<a href="https://sarkarifoam.com/">sarkari results</a>



<a href="https://realtimenews.org.in/jio-rockers-hd-telugu-tamil-movies-download-2020-free/">jio
rockers tamil </a>
Sukhabogi NiharikaSukhabogi Niharika
Without using JS this can be done through HTML only.

<div style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" frameborder="0" src={navigateTo}></iframe>
</div>