iframe嵌入grafana loki查询日志分页

转载

幸福的地图 2024-11-09 06:23:53

文章标签 iframe实现父子内容 iframe实现内容共用 iframe实现共用头和尾 iframe实现父子共用 iframe 父子共用 文章分类 云原生云计算

利用iframe标签实现父子页面的嵌套

一、需求及场景
二、了解iframe
三、代码实现

1.后台代码
2.前台代码

（1）、父页面
(2)、子页面

3.实现效果

一、需求及场景

通过iframe标签实现父子页面的嵌套，多用于部分内容共用的多页面，常见于某系统的头和尾共用
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、了解iframe

（1）iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。目前所有浏览器都支持标签。
（2）iframe 元素常见语法

<iframe id="" class="" name="" height="" width="" src="" frameborder="" data-id="" seamless></iframe>

（3）iframe 元素中的属性介绍

1、id、class、height和width：与我们平常使用的无异，常用于获取元素, 方便对iframe样式的控制
    2、name：为了在按钮或者链接点击的时候可以通过target属性=iframe的name属性来控制iframe的的渲染哪一个(iframe的src属性)页面
    3、src的值表示页面刚加载的时候iframe内要显示的内容(通过target可以动态改变的)
    4、frameborder：规定是(1)否(0)显示 iframe周围的边框，frameborder="0"是告诉iframe的边框为0
	5、 data-id：自定义了一个data-id的属性,可以通过js获取到它的值。只是行内存放数据的一个标签，跟input里面的value作用是一样的，同时在HTML5 中增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放	   
	 6、 seamless 属性属于逻辑属性。当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）

三、代码实现

1.后台代码

代码如下（示例）：

package test.controller;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test")
public class TestController {
	
	@RequestMapping(value = "/parent")
	public String parent(HttpServletRequest request, Model model) {
		return "parent";
	}
	
	@RequestMapping(value = "/children")
	public String children(HttpServletRequest request, Model model) {
		return "children";
	}
	
	@RequestMapping(value = "/daughter")
	public String daughter(HttpServletRequest request, Model model) {
		return "daughter";
	}
	
	@RequestMapping(value = "/son")
	public String son(HttpServletRequest request, Model model) {
		return "son";
	}
}

2.前台代码

（1）、父页面

通过menu方法来控制src值的改变：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>嵌套父页面</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <style type="text/css">
		#head {
			height: 300px;
			width: 100%;
			background-color: green;
			text-align: center;
			color: #fff;
			font-size: 20px;
		}
		
		#foot {
			height: 300px;
			width: 100%;
			background-color: blue;
			text-align: center;
			color: #fff;
			font-size: 20px;
		}
</style>
  </head>
  <body>
	   <div id="head">这是共用头<br>
		   <button onclick="menu(1)">children菜单</button>
		   <button onclick="menu(2)">daughter菜单</button>
		   <button onclick="menu(3)">son菜单</button>
	   </div>
	  
	   <iframe id="iframe0" class="J_iframe content" name="iframe0" height="400px" width="100%"  src="/TestModel/test/son" frameborder="0" data-id="" seamless></iframe>
	  
	   <div id="foot">这是共用尾</div>
	   
	   <script type="text/javascript">
		   function menu(str){
			   var src="/TestModel/test/children";
			   if(str=='1'){
				   src="/TestModel/test/children";
			   }else if(str=='2'){
				   src="/TestModel/test/daughter";
			   }else if(str=='3'){
				   src="/TestModel/test/son";
			   }
			   $("#iframe0").attr("src", src);
		   }
	   </script>
  </body>
</html>

(2)、子页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>嵌套子页面</title>
  </head>
  <body>
		<h1>这是是son页面</h1> 
  </body>
</html>

子页面内容一致，不做赘述，详情参考图示：

iframe嵌入grafana loki查询日志分页_iframe实现父子共用