0

id という引数を持つ loadFrame という関数を作成しました。この関数が呼び出されると、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 のインスタンスが 1 つだけになるようにします。

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

コンテンツを追加しようとするたびに、代わりに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 に答える