How to Make a Pop Up With an iFrame in JavaScript


There are a number of reasons why you might want to combine the attributes of a JavaScript pop up window with an HTML IFrame tag. You may be passing variables to a pop up that queries a database with those variables in turn. You may not want your user to be able to see the URL in play, and be able to query your database with their own script. Whatever the case, inserting an IFrame into a JavaScript pop up window requires only a static page and a simple JavaScript prompt.

  • Create a new static HTML page. Within the <body> tags, place an <iframe> tag. Set the "src" parameter of the tag equal to the complete URL you wish to display in the IFrame. Save the static HTML page to the directory from which you intend to publish it.

  • Create the JavaScript code snippet that will open your pop up. If you wish to open the new window when a page loads, attach the following code as an "onload" event in the <body> tag of the appropriate page. If you wish to have the new window open when a link is clicked, attach the following code as an "onclick" event in the appropriate <a> tag:

    onclick="'popup.html', 'width=xxx, height=xxx');"

    where "popup.html" is the name of the static page saved in Step 1, and the desired width and height of the pop up in pixels are substituted for the two instances of "xxx."

  • Save all open files, and publish them to your Web server. You now have a JavaScript pop up window, with an embedded IFrame.

Tips & Warnings

  • Most modern Web browsers have pop up blockers that will prevent JavaScript calls such as this. You may wish to post a notice to your users to turn pop up blockers off when using your site.

Related Searches


  • Photo Credit Stockbyte/Stockbyte/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!