创建使用 ajax 更新 iframe 的链接

Creating links that update iframe using ajax

本文关键字：iframe 链接 更新 ajax 创建      更新时间：2023-09-26

>我在这里创建了一个简单的模板：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>

它比你想象的要简单得多：只需命名 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>

你也可以这样尝试：

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

只需更换iFrame的SRC，浏览器就会自动开始加载新的源。更新提琴手的最终来源：更新的小提琴手

相关文章：