0

我创建了一个名为 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>
4

3 回答 3

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>
于 2013-11-06T10:57:42.073 回答
0

尝试这个

演示： 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>
于 2013-11-06T11:06:43.947 回答
0

因为每次您尝试附加内容时，而是使用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>
于 2013-11-06T10:58:06.907 回答