父窗口调用iframe中的bootstrap-table进行刷新失败的问题

最新推荐文章于 2023-05-30 17:35:16 发布

程序员猪猪侠

最新推荐文章于 2023-05-30 17:35:16 发布

阅读量637

点赞数

分类专栏： html 文章标签： html js

本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/109069359

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

父窗口使用iframe加载了子页面如下

<iframe style="width:100%;height: 100%;" id="modelManagerIframe" src="./model/ui/test.html" frameborder="0"></iframe>

test.html中含有bootstrap-table的table如下

<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <script>if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }</script>

    <script src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../../plugin/bootstrap-4.3.1/css/bootstrap.css" id="default-theme">
    
    <link rel="stylesheet" href="../../plugin/bootstrap-table/css/bootstrap-table.css" />

    <script type="text/javascript" src="../../plugin/bootstrap-table/js/bootstrap-table.js"></script>
  
</head>
    <body>
        <div id="toolbar">
  <button id="button" class="btn btn-secondary">load</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-toolbar="#toolbar"
  data-height="460"
  data-click-to-select="true"
  data-checkbox-header="false"
 >
  <thead>
    <tr>
       <th data-field="state" data-checkbox="true"></th>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')
  function updateTestTable(data){
    $table.bootstrapTable('load', data)
  }

 
</script>
       
        
    </body>
  
</html>

此时在父窗口的js中添加如下代码

$("#modelManagerIframe").contents().find("#button").click(function(e){
        
         let dataTableObj=$("#modelManagerIframe").contents().find("#table");
         dataTableObj.bootstrapTable('load',_this.randomTestData())
})
randomTestData() {
        var startId = ~~(Math.random() * 100)
        var rows = []
    
        for (var i = 0; i < 10; i++) {
          rows.push({
            id: startId + i,
            name: 'test' + (startId + i),
            price: '$' + (startId + i)
          })
        }
        return rows
 }

此时点击子窗口中的load按钮，发现子窗口的table并未更新，如下图

程序也木有报错。咋办呢。换个思路解决问题，将父窗口的数据组织好，然后去调用子窗口的刷新方法，将bootstrap-table的load的方法在子窗口中实现，改造如下

$("#modelManagerIframe").contents().find("#button").click(function(e){
            let child=$("#modelManagerIframe")[0].contentWindow;
            child.updateTestTable(_this.randomTestData());
})

此时点击子窗口的load按钮，数据出来啦

程序员猪猪侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
父窗口调用iframe中的bootstrap-table进行刷新失败的问题

父窗口使用iframe加载了子页面如下<iframe style="width:100%;height: 100%;" id="modelManagerIframe" src="./model/ui/test.html" frameborder="0"></iframe>test.html中含有bootstrap-table的table如下<!DOCTYPE html><html style="height: 100%;"><hea
复制链接

扫一扫

专栏目录