用iframe完成页面嵌套

冷不防 2022-01-21 08:27 1823阅读 0赞

用iframe完成页面嵌套

作者：吱韩菌  
开发工具：Visual Studio 2015  
撰写时间：2019-5-31

今天要给大家展示的是如何运用iframe标签完成页面嵌套。下面我们要做的是用iframe完成页面嵌套后，点击（选座、办登机牌）按钮，能够实现页面切换。  
![在这里插入图片描述][20190609112224301.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]

代码部分主要分为三部分，第一部分是按钮和iframe标签部分，这一部分需要做的是搭建好能够实现点击功能的按钮和能够嵌套页面的iframe标签，还需要给它们添加ID，iframe标签给它设置了width=100%，是让显示的页面宽度为原来的100%，至于border:0px; 是因为使用了插件出现了不需要的边框，border:0px;能够清除插件带来的边框影响。  
![在这里插入图片描述][20190609112255690.png]  
![在这里插入图片描述][20190609112311354.png]  
第二部分是JS部分，获取ID点击按钮实现点击事件，通过点击后调用封装好的方法$("\#content").attr(“src”, “/Service/FWService/check”) 点击按钮可以切换iframe嵌套的页面，/Service/FWService/check 是通过路径获取到需要切换的页面。  
![在这里插入图片描述][20190609112537913.png]

第三部分就是需要嵌套的页面部分，需嵌套的页面需要建一个新页面在搭建，但在搭建页面时最好先嵌套成功再搭建，因为这样比较方便。  
![在这里插入图片描述][20190609112426179.png]  
最后需要注意的是当显示的iframe高度不合适时，可以通过$("\#content").height((windowsHeight - 110) + “px”);，windowsHeight获取iframe页面高度，调试合适为止，windowsHeight调节的高度都是数字，还需要加上“px”，否在无法实现效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]

[20190609112224301.png]: /images/20220121/53449550510041d4a42e5d9ba36fdd1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]: /images/20220121/597985bd27bd4606a830fc9d01148051.png
[20190609112255690.png]: /images/20220121/6bfbcebc9e4b4e379acd68f3f7519a99.png
[20190609112311354.png]: /images/20220121/2f2fe0d45a154d70837e81e098bf4dde.png
[20190609112537913.png]: /images/20220121/7428ebf3fedf47498e0934abbdd7af44.png
[20190609112426179.png]: /images/20220121/b45d851d98a24dfc871f6fbf02d785b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]: /images/20220121/6e44720b0e7a4ba28487484ab3d96544.png