+ 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 (event.data === '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="https://www.salesforce.com" 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", "http://google.com/");
            ifrm.style.width = "640px";
            ifrm.style.height = "480px";

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