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 并在链接上设置目标属性：

<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，浏览器应该会自动开始加载新源。更新提琴手的最终来源：更新提琴手

于 2012-08-08T13:37:28.670 回答