CODEWITHSUNDEEP
jqueryiframe
John Smith
John Smith

Reputation: 489

JQuery dynamic iFrame function

I've created a function called loadFrame with an argument called id. When this function is called, jQuery iframe is created and it loads a url with the id argument in the string. Here is the code:

<script language="javascript" type="text/javascript">

function loadFrame(id){
    $('body').append('<iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>');
}

</script>

<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>

Problem that I am facing is that every time i click to load an iFrame, it keeps creating a new instance of the iFrame. I want there to only be one instance of the iFrame at all times.

Is there a way to have like a close icon on the top right of the iFrame so that I can unload the iframe completely?

Thanks

Got it working using the suggestions below. Here is the working code:

<script language="javascript" type="text/javascript">

function loadFrame(id){
    $('#iframecontent').html('<div id="iframe_'+id+'" style="position:relative;width:400px;"><button onclick="unloadFrame(\''+id+'\')" data-tar="'+id+'">Close</button><iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame" id="frame" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe></div>');
}

function unloadFrame(id){
    var iframeid = "#iframe_"+id;
    $(iframeid).remove();
}    

</script>

<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>

<div id="iframecontent"></div>

Upvotes: 0

Views: 2304

Answers (3)

rynhe
rynhe

Reputation: 2529

Try this

demo : http://fiddle.jshell.net/njPQP/1/

<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>

<script language="javascript" type="text/javascript">

function loadFrame(id){
    var iframeid = "#iframe_"+id;    
    if($(iframeid).length < 1)
    var append_data = '<div id="iframe_'+id+'" style="position:relative;width:400px;"><button onclick="unloadFrame(\''+id+'\')" data-tar="'+id+'">Close</button><iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame" id="frame" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe></div>';
     $('body').append(append_data);
}

function unloadFrame(id){
    var iframeid = "#iframe_"+id;
    $(iframeid).remove();
}    

</script>

Upvotes: 0

Francisco Pereira
Francisco Pereira

Reputation: 11

Try this: 

    <script language="javascript" type="text/javascript">

        function loadFrame(id){

            $('iframe').remove();
            $('body').append('<iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>');
        }

        </script>

        <span onclick="loadFrame(1);">Summary for User 1</span>
        <span onclick="loadFrame(2);">Summary for User 2</span>
        <span onclick="loadFrame(3);">Summary for User 3</span>

or this:

function loadFrame(id){


    $('#frame1').attr('src','loadFrame.php?id=' + id + '&cmd=summary');
}

</script>

<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>

<iframe src="" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>

Upvotes: 1

Joke_Sense10
Joke_Sense10

Reputation: 5412

Because everytime your trying to append the content,Instead use html function to insert the document at particular instance.

function loadFrame(id){
$('#iframecontent').html('<iframe src="loadFrame.php?id=' + id + '&cmd=summary"
name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;">
</iframe>');
}

Html:

<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
<div id="iframecontent"></div>

Upvotes: 0

Related Questions