本文主要是介绍js 监视 iframe 或 frameset 的内容变动（文盲第二版），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
之前写了一个js 监视 iframe 或 frameset 的内容变动，结果有人留言了，然后仔细一看，代码通用性好差，当时自己的项目能用了，就没再继续研究了
今天经过一番调试，弄出来了下边这个效果，估计大家应该都能用起来了
文件：test_iframe_400.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body><a href="test_iframe_100.html">100</a><a href="test_iframe_800.html">800</a><div style="height:400px;width:100%;">400</div></body>
</html>文件：test_iframe_100.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body><a href="test_iframe_400.html">400</a><a href="test_iframe_800.html">800</a><div style="height:100px;width:100%;">100</div></body>
</html>文件：test_iframe_800.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><body><a href="test_iframe_100.html">100</a><a href="test_iframe_400.html">400</a><div style="height:800px;width:100%;">800</div></body>
</html>
文件：test_iframe.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><script type="text/javascript" src="http://static.caigou.com.cn/js/jquery-1.8.0.min.js"></script></head><body><div><form><input type="radio" value="test_iframe_100.html" name="url" /> 100高<input type="radio" value="test_iframe_400.html" name="url" /> 400高<input type="radio" value="test_iframe_800.html" name="url" /> 800高<br/><input type="radio" value="a" name="target" /> a窗口<input type="radio" value="b" name="target" /> b窗口<br/><input type="button" value="跳转" /></form></div><br/><br/><iframe src="test_iframe_100.html" name="a"></iframe><iframe src="test_iframe_400.html" name="b"></iframe><script>$(document).ready(function(){$('iframe').each(function(){var loaded = function(){console.log(this.location.href + ' is loading')var sn = 0;for(var i =0;i<frames.length;i++){if (frames[i]==this){sn=i;break;}}$('iframe').each(function(){if (this.contentWindow==frames[sn]){var ifr = $(this);$(this.contentDocument).ready(function(){console.log(frames[sn].location.href + ' is loaded')console.log(frames[sn].document.body.clientHeight)ifr.css({height:frames[sn].document.body.clientHeight+'px'})})}});}var unloaded = function(){var sn = 0;for(var i =0;i<frames.length;i++){if (frames[i]==this){sn=i;break;}}setTimeout(function(){frames[sn].onload = loaded;frames[sn].onunload = unloaded},0); // 哪怕是立刻执行该闭包，当前线程也已释放，frames中的对象已重构，所以执行到闭包内部时，frames重新定义加载事件}this.contentWindow.onload = loaded;this.contentWindow.onunload = unloaded;});}); </script></body>
</html>
好了，功能完成，包括url变动监听，url加载完成后宽高变动
这个监控其实很简单，那就是对window对象frames进行监控，当页面具有frameset和iframe时，frames中就具有了对应的子窗口
然后，对事件进行绑定，当window加载成功时，会触发onload事件，那么直接绑定就好
再然后，当页面地址发生变动时，可以触发window.onunload事件，但是已绑定的onload事件不好使了
然后，我们在触发onunload事件的线程外重新获取frames，并对相应的子窗口重新进行事件绑定，因为你页面地址一变动，frames就重构了
最后，再对文档加载完毕时进行监听，再最后，完成自己需要完成的功能即可
注意：对于跨域的页面引用，这个js不太适用，跨域问题如果谁解决了，请在本文后留言，文盲也想学习一下
这篇关于js 监视 iframe 或 frameset 的内容变动（文盲第二版）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
