Question

我创建了一个名为loadFrame的函数，其参数名为id。调用此函数时，将创建jQuery iframe，并在字符串中加载带有id参数的url。这是代码：

<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>

我面临的问题是，每次我点击加载iFrame时，它都会不断创建iFrame的新实例。我希望在任何时候都只有一个iFrame实例。

有没有办法在iFrame的右上角有一个关闭图标，以便我可以完全卸载iframe？

由于

使用以下建议了解它。这是工作代码：

<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>

Answer 1

试试这个：

    <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>

或者这个：

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>

Answer 2

因为每次尝试附加内容时，请使用html函数在特定实例中插入文档。

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>

Answer 3

试试这个

演示： 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>

JQuery动态iFrame功能

3 个答案: