html打印预览导致一些监听事件失效处理

最近在iframe嵌入一个html，html中有一些input框和textarea框需要监听变动事件，没有点击打印之前都是可以正常监听得到的，但是调用打印方法以后就监听不到了，在打印的时候调用了alert方法查看打印的html内容，发现原来的script部分本来是写在标签后面的，结果变成了标签之前了，这个问题其实展示的就是打印的时候我们把html内容重置了一遍，但是页面没有刷新，导致监听丢失了，所以我们需要做的就是，重新给input框和textarea框设置监听即可。下面按着例子解说一下如何操作（用的是spring-boot+maven项目）。

1、在一个html页面写入一个iframe和一个打印按钮，在该iframe嵌入一个html页面，效果如下图：

body部分代码：/test就是你嵌入的html的路径

script部分代码：

function testPrint(){
	var htDoc = document.getElementById('testIframe').contentWindow.document;
	var c = htDoc.documentElement.outerHTML;
	var printer = document.getElementById("testIframe").contentWindow;
	printer.document.body.innerHTML = c;
	printer.print();
	//下面是关键，通过找到嵌入的html中的一个隐藏按钮，来触发重设监听
	setTimeout(function(){
		var htDoc22 = document.getElementById('testIframe').contentWindow.document;
		console.log("点击打印按钮后的延时方法执行 ");
		htDoc22.getElementById('restore-listener').click();
	},500);
}

有兴趣的可以打印上面的那个var c，会看到script部分位置变了。

2、嵌入的html：/test

需要映射Controller

@GetMapping("/test")
    public String test() {
        return "/modelhtml/purchase-and-sale-contract";
    }

purchase-and-sale-contract.html代码：

合同




合同编号：





供方单位（供方）：



需方单位（需方）：





第一条、合同概况




1、工程名称：（全称）


2、工程地点：


3、供货期：从至止。




第二条、其他约定：

3、解释：

当没有点击打印时候，页面dom结构加载完毕会执行$(function(){})里面的方法，此时监听生效，当input框或者textarea框改变的时候，将会监听到改变。

点击打印后，页面不刷新，但却被重新赋值，导致监听失效，通过嵌入页面的一个按钮（此按钮隐藏，我们让代码来触发）来重新为input和textarea设置监听，关键代码：

setTimeout(function(){
        var htDoc22 = document.getElementById('testIframe').contentWindow.document;
        console.log("点击打印按钮后的延时方法执行 ");
        htDoc22.getElementById('restore-listener').click();
    },500);