父窗口使用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按钮,数据出来啦