JS iframe跨域自适应内容高度

最新推荐文章于 2023-07-10 17:12:08 发布

ayue225

最新推荐文章于 2023-07-10 17:12:08 发布

阅读量170

点赞数

分类专栏： JavaScript 文章标签： IE Opera XHTML HTML

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>Cross-Domain iframe Resizing</title>
    <script type="text/javascript">
      var FrameManager = {
		    currentFrameId : '',
		    currentFrameHeight : 0,
		    lastFrameId : '',
		    lastFrameHeight : 0,
		    resizeTimerId : null,
		    init: function() {
		        if (FrameManager.resizeTimerId == null) {
		            FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
		        }
		    },
		    resizeFrames: function() {
		        FrameManager.retrieveFrameIdAndHeight();
		        if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {
		            var iframe = document.getElementById(FrameManager.currentFrameId.toString());
		            if (iframe == null) return;
		            iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
		            FrameManager.lastFrameId = FrameManager.currentFrameId;
		            FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
		            window.location.hash = '';
		        }
		    },
		    retrieveFrameIdAndHeight: function() {
		        if (window.location.hash.length == 0) return;
		        var hashValue = window.location.hash.substring(1);
		        if ((hashValue == null) || (hashValue.length == 0)) return;
		        var pairs = hashValue.split('&');
		        if ((pairs != null) && (pairs.length > 0)) {
		            for(var i = 0; i < pairs.length; i++) {
		                var pair = pairs[i].split('=');
		                if ((pair != null) && (pair.length > 0)) {
		                    if (pair[0] == 'frameId') {
		                        if ((pair[1] != null) && (pair[1].length > 0)) {
		                            FrameManager.currentFrameId = pair[1];
		                        }
		                    } else if (pair[0] == 'height') {
		                        var height = parseInt(pair[1]);
		                        if (!isNaN(height)) {
		                            FrameManager.currentFrameHeight = height;
		                            FrameManager.currentFrameHeight += 15;

		                        }
		                    }
		                }
		            }
		        }

		    },
		    registerFrame: function(frame) {
		        var currentLocation = location.href;
		        var hashIndex = currentLocation.indexOf('#');
		        if (hashIndex > -1) {
		            currentLocation = currentLocation.substring(0, hashIndex);
		        }
		        frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
		    }
		};
		window.setTimeout(FrameManager.init, 300);
    </script>
</head>
<body>
    <div id="page-wrap">
        <h1>Cross-Domain iframe Resizing</h1>
        <iframe id="frame-one" scrolling="no" frameborder="0" src="http://digwp.com/examples/iFrameSource/source.html" onload="FrameManager.registerFrame(this)"></iframe>
    </div>
</body>
</html>