两个iframe同时滚动实现界面内容对比功能

背景：因为要实现一个版本对比功能，所以要保证两个界面能同时滚动。（本文只讲同时滚动，对比功能文本只讲思路，具体代码实现如有需要 可以联系我），因为过程中有部分收获特此记录。

本文参考：

控制两个iframe页面同时滚动_IDC笔记

同步滚动(两个iframe内嵌同一个html页面进行)_ifame根据父页面一起滚动_寒凌冰封的博客-CSDN博客

解决方案：

方案一（本人未采用、但测试可用）、

优点，方面快捷简单

缺点，必须是独立每个子界面

直接通过在子界面的boby标签上加 onscroll事件，让右边滚动数量 等于 左边滚动数量。

父界面代码：

子界面left:

	
		
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

子界面right:

	
		
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

运行效果：

注意:这个代码不能直接通过 file:///C:/Users/zhangsan/Desktop/test/indx.html 这样去访问，需要放到应用服务器中（tomcat等）运行，会报域安全问题，报错如下

方案二（本人采用的）、

优点，可以实现N个界面同时滚动和对比。

缺点，姑且算要多写几行代码吧。

采用通过监听页面的滚动事件来同步调用另外一个界面进行滚动。

具体做法是在子界面上建立监听方法，然后再方法内掉用父界面方法，父界面方法去调用对应子界面的滚动。

父界面代码：

		
		

			

				
更换左边版本号：
				

					 
				
				

				
更换右边版本号：
				

	            	
	            
			
		
		
	
	

		
	

注意：versionName 参数是来标识 是那个子界面的。

踩坑：这里使用如果有使用前端框架的iframe需要注意，有些框架的iframe会导致 $(window.frames["XXX"] 获取不到，console打印 出现空数组“[]”，虽然空数组  点击打开里面又有这个iframe 对象信息，实际不可用，这里我搞了半天，如果出现该问题，建议换成我代码中的形式。

PS：版本对比思路是（不做对比跳过），版本1、版本2两个数据存放 采用 key - value 格式 这样遍历的时候 就可以 通过 for(key in versionAyy) 来遍历，通过 key去获取另外一个数组的 内容，然后两个进行比较(当遇到多选框、复选框 只展示差异选项时，通过字符截取 获取选择项 然后逐一对比，获取差异项存放到另一个差异项数组中)，如果差异就 存放到一个差异集合，子界面再调用即可，这里就不放上来了，如有需要或者探讨可以联系我。

子界面js代码:

//获取地址栏参数，标记当前界面是谁
	function getParmar(name){
		var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if(r != null){
			return unescape(r[2]);
		}
		return null;
	}
	/*以下 try 模块只在对比界面生效，这里要兼容其他功能也需要调用该界面*/
	try{
		//获取对比界面传递的参数
		var versionName = getParmar("versionName");
		console.log(versionName+" 界面");
		if(versionName == "version1"){
                //这里是获取父界面存放的数据做数据展示
				var date = parent.getData1();
                //表单填充方法，这个方法就不放上来了，根据需要自行定义，
				SetData(date);
		}else{
            //这里是获取父界面存放的数据做数据展示
			var date = parent.getData2();
            //表单填充方法，这个方法就不放上来了，根据需要自行定义，
			SetData(date);
		}

		//绑定滚动事件 如不做对比，上面代码请忽略
		$(window).scroll(function(){
			var topNum = $(window).scrollTop();
            //调用父类滚动方法
            parent.srcollTop(versionName,topNum);
			
		});
	}catch (e) {
		// TODO: handle exception
	}

最后效果如下：