按钮/链接刷新iframe

最新推荐文章于 2024-09-20 10:06:40 发布

weixin_38296925

最新推荐文章于 2024-09-20 10:06:40 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： js iframe

本文链接：https://blog.youkuaiyun.com/weixin_38296925/article/details/88038062

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap 4.2版本创建导航栏，并通过iframe集成页面，提供两种实现方式：链接形式和按钮形式的导航栏，详细展示了HTML、CSS和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的js用的是bootstrap4.2版本
方法一：
链接形式为导航栏

<!--左侧导航栏-->
<div class="main_left">
	<nav class="nav flex-column navbar-dark bg-dark text-center font-weight-bolder" aria-orientation="vertical">
		<li><a class="nav-link" href="name.html" target="menuFrame" href="name.html">Name</a></li>
		<li><a class="nav-link" href="education.html" target="menuFrame">Education</a></li>
	</nav>
</div>

下面的代码放在另一个div里面

<!--右侧主页-->
<div>
	<iframe id="menuFrame" name="menuFrame" src="name.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="80%" height="100%; float:right"></iframe>
</div>

script放在body中，头尾都可以

("li").on('click', function() {
	 var href = $(this).find("a").attr('href');
	 $('#mainContents').empty();
	 $('#mainContents').load("../new/" + href);
	 //阻止跳转
	 $(this).parents('li').addClass('active').siblings('li').removeClass('active');
	 return false;
});

方法二：
按钮形式的导航栏，有点击效果比较好看

<div class="main_left">
	<div class="nav btn-group-vertical">
		<button type="button" class="btn btn-secondary" onclick="demo(this)" custom="name.html">Name</button>
		<button type="button" class="btn btn-secondary" onclick="demo(this)" custom="education.html">Education</button>
	</div>
</div>

iframe和上面的一样

<!--右侧主页-->
<!--src里面为初始要在右侧显示的页面-->
<div>
	<iframe id="menuFrame" name="menuFrame" src="name.html" style="overflow:visible;border: 0px;" marginwidth="0" marginheight="0" width="100%" scrolling="no" frameborder="0" "reinitIframe()" ></iframe>
</div>

这里的script一定要放在head里面

demo = function(e){
	//得到iframe里自定义的属性custom
	var address =$(e).attr("custom");
	console.log(address);		//输出在控制台
	$("iframe").attr("src",address);	//更改属性src的值-->
}
reinitIframe = function() { 
	var iframe = document.getElementById("menuFrame");
	try{
		var bHeight = iframe.contentWindow.document.body.scrollHeight;
		var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
		var height = Math.max(bHeight, dHeight);
		iframe.height = height;
		console.log(height);
	}catch (ex){}
}

css代码

.main_left{
    width: 20%;
    height: 100%;
    float:left;
    cursor:pointer;
}