How to display iframe based on JS output

Question

I want to display an iframe in my website if a user accepts an alert box message to see the website.

For example, if a user clicks on the career page, I'll show him an alert box by giving two options ( if he selected "yes" ). I have to display my webpage as an iframe in the same page.

I tried the following by writing the function in JS

<script>
function myFunction() {
var r=confirm("Press a button!");
  if (r==true) {
    <iframe src="http://w3schools.com/tags/tag_div.asp" width="100%" height="100%">
    </iframe>
  }
}
</script>

If you are not trying to access a protected resource have a 'dislapy:none' to that iframe when your page gets loaded and just change the 'css to display:block' using 'jquery' whenever you wish. — Kawinesh S K
– Kawinesh S K, Commented Dec 5, 2013 at 6:50
@Pavi, you will not be properly serving your users if you use the display:none way. The way I showed you makes sure the page is only loaded if the visitor decides to open it, and not beforehand. The display: none way makes people angry, and it costs you server resources whether or not someone chooses to participate! — digitalextremist
– digitalextremist, Commented Dec 5, 2013 at 6:53
Now that you have the technique sorted out, this seems like a time for a new question with fresh code to answer again, linked to this one. Can you do that so you don't disturb your first question? It's very clear and self contained. — digitalextremist
– digitalextremist, Commented Dec 5, 2013 at 7:23
I added a second answer to my first answer. Your second question was much larger than the first, but I simplified it for you and included code. I hope this helps you understand javascript and the DOM. — digitalextremist
– digitalextremist, Commented Dec 5, 2013 at 7:53

Yagiz Ozturk · Accepted Answer · 2013-12-05 06:47:42Z

3

You can try to append the iframe to the DOM when YES clicked.

    function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

answered Dec 5, 2013 at 6:47

Yagiz Ozturk

5,4387 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

digitalextremist Over a year ago

If you aren't using jQuery, this is a great answer. Props to @Yagiz for using native methods in case.

digitalextremist · Accepted Answer · 2013-12-05 07:44:38Z

1

Are you using jQuery? If so, check this out! I show you two ways to place the iframe:

<script>
function myFunction() {
   var r=confirm("Press a button!");
   if (r==true) {

       //de put it at the end of the body
       $( '<iframe src="http://w3schools.com/tags/tag_div.asp" width="100%" height="100%"</iframe>' ).appendTo( "body" );

       //de put it in a pre-decided container.
       $( '<iframe src="http://w3schools.com/tags/tag_div.asp" width="100%" height="100%"</iframe>' ).appendTo( "#container" );

   }
}
</script>

This is a much better way than just "revealing it" because you seem to WANT the user to choose to bring up the iframe... The way above is very close to what you originally tried to do. You just needed to actually insert the element into the DOM as I showed.

Good luck!

UPDATE: I also answered your much larger question ... here is a completely cleaned and working version of what you needed with seperate iframes:

http://jsfiddle.net/W2e6u

It goes like this, with the HTML in the fiddle for you to look at:

function changeContainer(uri) {
    var r=confirm("Press a button!");
    if (r==true) {
        $( '#container' ).fadeOut('fast').remove();
        $( '<iframe id="container" src="http://www.nabler.com/services/'+uri+'.asp" width="100%" height="100%"</iframe>' ).appendTo( "body" );
    }
}

And an HTML button example:

<button onclick="changeContainer('campaign-analytics')">Campaign Analytics and Reporting</button>

edited Dec 5, 2013 at 7:44

answered Dec 5, 2013 at 6:47

digitalextremist

5,9924 gold badges46 silver badges64 bronze badges

5 Comments

Pavi Over a year ago

Thank you for the solution. i used ur code and it works as i expected. However i am facing the problem while clicking on other buttons. Iframe which downloaded for the first time while i clicked on some button is not changing even when i was clicking on other buttons

digitalextremist Over a year ago

Cool! Glad it worked for you. Do you have a fiddle or example site showing this in use? I can help tweak it further. What does your new code look like?

Pavi Over a year ago

i posted it on my blog for checking purpose.. kindly have a look techshale.blogspot.in in the testing page

digitalextremist Over a year ago

Great! First of all, you don't need both appendTo lines. I just gave two examples. You can choose whether you want the iframe inserted into the <body> element, or into a new #container element.

digitalextremist Over a year ago

I answered your question again, with a lot of detail and a js fiddle. Everything is in my answer above, as an update.

Aditya Singh · Accepted Answer · 2013-12-05 06:57:46Z

0

Try this out:- http://jsfiddle.net/adiioo7/sEz8C/

JS:-

function myFunction() {
    var r = confirm("Press a button!");

    if (r == true) {
        var myDiv=document.getElementById("test");
        var makeIframe = document.createElement("iframe");
        makeIframe.setAttribute("src", "http://w3schools.com/tags/tag_div.asp");
        makeIframe.style.width = "100%";
        makeIframe.style.height = "100%";
        myDiv.appendChild(makeIframe);
    }
}
myFunction();

answered Dec 5, 2013 at 6:57

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to display iframe based on JS output

3 Answers 3

1 Comment

5 Comments

Try this out:- http://jsfiddle.net/adiioo7/sEz8C/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Try this out:- http://jsfiddle.net/adiioo7/sEz8C/

Comments

Your Answer

Sign up or log in

Post as a guest

Related