近期在做项目中，有用到这样一个场景。

在一个主页面中，有三个选项卡，如图

这里我使用的是iframe标签。此处的第三个选项卡中，我使用的是bootstrap-table来生成表格数据，其中有一个是在表格加载成功之后要进行合并单元格的。如图：

但是因为iframe是第一次进入页面就将页面的相关内容进行加载。会导致虽然表格里面的内容有加载出来，但是在onloadSuccess里面的合并单元格语句没有实现。如图：

这时候我的思路是在父iframe的js语句中，加入了一条“当点击了第三个选项卡，再来触发加载bootstrap-table的内容，这样onloadSuccess里面的内容也能被执行到”

最后结果出来证明思路可行。

相关代码：

<div class="tabs-container">//选项卡里的内容
		    ...
			<li role="presentation">
				<a data-toggle="tab"  role="tab" class="menuTab"  aria-controls="tab-3" href="#tab-3" id="workReport">工作汇报路径</a>
			</li>
		</ul>
</div>


<div class="tab-content">//子iframe
		...
		<div role="tabpanel" class="tab-pane" id="tab-3">
			<iframe th:src="@{/business/workReport}" id="iframe3"></iframe>
		</div>
</div>

script:
    $('#workReport').click(function () {
			$('#iframe3')[0].contentWindow.showReport();//调用子页面的函数showReport()去加载bootstrap-table的内容
	})