Question

如何在不刷新父页面的情况下刷新iframe内容？当用户点击手风琴的标签（h3）时会发生刷新？

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" language="javascript">  
            $(function() {
                $( "#accordion" ).accordion({     
                    collapsible: true,
                    heightStyle: "content",
                    animate: {        
                        duration: 200,        
                        down: {            
                            easing: "easeOutBounce",            
                            duration: 1000        
                        }    
                    }
                });  
            }); 
        </script>
    </head>
    <body>
        <div id="accordion" style="width: 240px; height: 400px;">
            <h3>Rig Counts</h3>
            <div style="width: 238px; height: 270px;">
                <iframe name="I1" id="I1" src="https://amazon.com" frameborder="0"  width="100%" height="100%" scrolling="no">
                </iframe>   
            </div>
            <h3>Lost Time</h3>
            <div style="width: 238px; height: 270px;">
                <iframe name="I2" id="I2" src="http://ebay.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe> 
            </div>
            <h3>Rate Of Penetration</h3>
            <div style="width: 238px; height: 270px;">
                <iframe name="I3" id="I3" src="https://yahoo.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   
            </div>
            <h3>No Of Incident</h3>
            <div style="width: 238px; height: 270px;">
                <iframe name="I4" id="I4" src="https://google.com" frameborder="0" width="100%" height="100%" scrolling="no">
                </iframe>   
            </div>
        </div>
    </body>
</html>

Answer 1

将其放入点击事件中：

$('#I1').attr('src', function (i, val) {return val;});

它基本上将src设置回自身，这会导致iframe重新加载。

你也可以在JS中使用：

document.getElementById('#I1').contentDocument.location.reload(true);

单击accordion选项卡刷新iframe

1 个答案: