通过单击手风琴选项卡刷新 iframe答案

【问题标题】：Refresh an iframe by clicking on accordion tab通过单击手风琴选项卡刷新 iframe
【发布时间】：2013-08-16 10:55:51
【问题描述】：

如何在不刷新父页面的情况下刷新 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>

【问题讨论】：

标签： jquery iframe refresh accordion

【解决方案1】：

把它放在你的点击事件中：

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

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

你也可以在 JS 中使用：

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

【讨论】：

我爱你帮助我 :) ...真的你帮了我很多...非常感谢ssssssssssss
没问题。如果它解决了您的问题，请务必接受答案。祝你好运。
嗨，当用户点击同一个标签时，如何添加（加载中...）文本消息？
@Khalil 我从来没有这样做过——你应该尽你最大的努力，并提出一个新问题，其中包括必要的 HTML、CSS 和 JS。获得帮助的最佳方式是在 jsfiddle 中发布您的内容并提出问题。