点击连接切换iframe

KingFu28

于 2023-02-20 10:24:39 发布

阅读量468

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/kingwin28/article/details/129119540

版权

该HTML代码示例展示了如何使用JavaScript和jQuery来实现点击链接动态改变iframe的源URL，并确保iframe的高度自动适应其内容。同时，还监听窗口大小变化，以在窗口调整时保持iframe内容的正确显示。

摘要由CSDN通过智能技术生成

<html>
<script type="text/javascript" src="jquery1.8.3.min.js"></script>
	<body>
		<div>
			<a href="#" onclick="changeUrl('1.html')">1.html</a>
			<a href="#" onclick="changeUrl('2.html')">2.html</a>
			<a href="#" onclick="changeUrl('3.html')">3.html</a>
		</div>

<iframe name="my_iframe" id="my_frame" src="default" width="750" height="100%" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" onload="changeFrameHeight()"></iframe>

<script type="text/javascript">
	function changeUrl(url){
		document.getElementById("my_frame").src=url;
	}
        function changeFrameHeight(){
            var iframe= document.getElementById("my_iframe");
            iframe.height= 0;   //这里必须要先设置成0，不然后面会有问题
            iframe.height=iframe.contentWindow.document.body.scrollHeight;
        }

        //监听浏览器窗口变换，这里采用jquery，不然在ie中会出现问题
        $(window).resize(function() { 
            changeFrameHeight();
        });

</script>
 
	</body>
</html>