使用jquery刷新iframe

最新推荐文章于 2019-08-15 17:56:30 发布

原创最新推荐文章于 2019-08-15 17:56:30 发布 · 846 阅读

2 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

112 篇文章

订阅专栏

本文介绍了一个使用HTML与JavaScript实现的简单网页布局，该页面通过三个并排显示的iframe加载同一远程URL，并提供了一个按钮用于刷新这些iframe。本文重点探讨了iframe元素的应用及其实现动态刷新的方法。

 
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script type="text/javascript">
 
        function refreshFrame() {
            $('#myframe').attr('src', $('#myframe').attr('src')); 
      }
 
    </script>
</head>
<body>
    <div  style="width:100%;height:350px"> 
        <div class="row">
            <iframe id="myframe" src="http://suz100:8100/CAR/EmbeddedPage_" frameborder=0 style="width:33%;height:350px" scrolling="no"></iframe>
            <iframe id="myframe" src="http://suz100:8100/CAR/EmbeddedPage_" frameborder=0 style="width:33%;height:350px" scrolling="no"></iframe>
            <iframe id="myframe" src="http://suz100:8100/CAR/EmbeddedPage_" frameborder=0 style="width:33%;height:350px" scrolling="no"></iframe>
        </div> 
          <button onclick="refreshFrame()">refresh</button>
    </div>
    <div style="width:100%;height:350px">
        <h1>中华人民共和国</h1>
    </div>
</body>
</html>