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.displayX = true;
    box.isMovable = false;
    // set your html content here
      '<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';;

    //if displayX is set to true, then override standard close event by this code
    box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() {
      // 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() {
    // if you want to be able to close the modal from the Visualforce page
    window.addEventListener('message', function(event){
      if ( === 'close'){

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>

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";
     <body onload="resizeFrame();">
your page contents here...

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

<apex:page showHeader="false">
<apex:pageBlock >
<apex:iframe src="" scrolling="true" id="theIframe"/>
</apex:pageBlock> </apex:page>

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:
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>
<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", "");
   = "640px";
   = "480px";

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

<a href="">sarkari result</a>

<a href="">sarkari result</a>

<a href="">sarkari results</a>

<a href="">sarkari results</a>

<a href="">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>