0

ここに簡単なテンプレートを作成しました: http://jsfiddle.net/sfntz/

メインページをリロードせずに、リンクで iframe 内のページを開くにはどうすればよいですか? そのようなことは、javascript ajax (まだコーディングの経験がないもの) で可能であると思います。

私が現在持っているコードは次のとおりです。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style>
    #left-container {
        width: 150px;
        float: left;
    }
    #right-container {
        width: 450px;
        float: left;
    }
</style>

</head>

<body>

    <div id="left-container">
        <a href="">Link to iFrame 1</a><br/>
        <a href="">Link to iFrame 2</a><br/>
        <a href="">Link to iFrame 3</a><br/>
        <a href="">Link to iFrame 4</a><br/>
        <a href="">Link to iFrame 5</a><br/>
    </div>

    <div id="right-container">
        <iframe src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="350px" width="350px">
        </iframe>
    </div>

</body>
</html>
4

2 に答える 2

2

思ったよりずっと簡単です: iframe に名前を付けて、リンクに target 属性を設定するだけです:

<iframe src="one.html" name="frame" id="frame"></iframe>
<a href="two.html" target="frame">Next Page</a>

jQuery を使用すると、次のことを試すことができます。

<iframe src="one.html" name="frame" id="frame"></iframe>
<a href="javascript:$('#frame').load('two.html');">Next Page</a>
于 2012-08-08T12:26:39.963 に答える
1

次のように試すこともできます。

<script>
$(document).ready(function(){
    $('#left-container a').click(function(_e){
       _e.preventDefault();
       $('#iframe_id').attr('src', $(this).attr('href'));
    }); 
});
</script>

iFrame の SRC を置き換えるだけで、ブラウザーは新しいソースの読み込みを自動的に開始します。フィドラーを更新した最終ソース: Updated Fiddler

于 2012-08-08T13:37:28.670 に答える