跨子域的iframe高度自适应
比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/',这种跨子域的页面,实现起来也比较简单,看下面的详细代码:
<!doctype html> <html > <head> <title>iframe 自适应高度测试</title> <style> iframe{ background-color:aquamarine; 100% } </style> </head> <body> <iframe src="./index1.html" frameborder="0" id="ifr"></iframe> </body> </html>
<!doctype html> <html> <head> <title>hello</title> <style> #one { 100px; height: 1110px; background-color: #ff6a00; } </style> </head> <body> <div id="one"> </div> <script> // 计算页面的实际高度,iframe自适应会用到 //www.kzwr.com 欢迎朋友们前来交流 function calcPageHeight(doc) { var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) var height = Math.max(cHeight, sHeight) return height } window.onload = function () { var height = calcPageHeight(document) parent.document.getElementById('ifr').style.height = height + 'px' } </script> </body> </html>