By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,547 Members | 1,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,547 IT Pros & Developers. It's quick & easy.

How to display a iframe when a button is clicked via javascript?

P: 1
I have a content area in which I would like to display some text when the page loads and when a button is clicked (biography). When another button is clicked (AFT) I would like this text to be replaced by the content of a URL via an iframe.

At the moment I have managed to get the text to appear when the page loads, however I can't get the iframe to replace the text when the AFT button is clicked. Can someone help me?

HTML code:
Expand|Select|Wrap|Line Numbers
  1. <div id="content" > <script src=""></script> <script> displayBiography(); </script> <iframe src="" name="iframe" id="iframe1"></iframe> </div> <div id="leftBar"> <br><br> <button class="button" onclick="displayBiography();"> Biography </button> <h3> Samples of Work </h3> <button class="button" onclick="toShow(#iframe1);" target="iframe1"> AFT </button> </div>
JS code:
Expand|Select|Wrap|Line Numbers
  1. var content = document.getElementById("content");
  2. var biography = "<p> text here</p>"
  3.         ;
  5. function displayBiography() {
  6.     "use strict";
  7.     content.innerHTML = biography;
  8. }
  10. window.onload = function() {
  11.     var iframe = document.getElementById('iframe1');
  12. = 'none';
  13. }
  15. function toShow() {
  16.     var iframe = document.getElementsByName('iframe');
  17. = 'block';
  18.     content.innerHTML = iframe;
  19. }
Dec 3 '17 #1
Share this Question
Share on Google+
1 Reply

P: 5
You can do this from jQuery .html() method.

On the button click you have show the iframe inside the div. THe code will be something like:

Expand|Select|Wrap|Line Numbers
  1. $("#buttonId").click(function(){
  2.     $("#content").html("<iframe></iframe>");
  3. });
Feb 1 '18 #2

Post your reply

Sign in to post your reply or Sign up for a free account.