js实现iframe路由切换

た入场券 2023-10-03 20:03 2阅读 0赞

页面内嵌套页面，可使用iframe实现

<div class="div_content">
         <iframe name="content_iframe" title="content_iframe" onload="hideIframeDiv()" class="content_iframe" 
                     frameborder="0"  scrolling="auto" src="m?xwl=mobile_yf/detectionByDoor/LifeDetection">   
         </iframe>
    
    </div>

js实现点击按钮切换iframe内的，路由切换：

点击切换按钮在上一遍文章[http://t.csdn.cn/frAZz][http_t.csdn.cn_frAZz]

function searchData(){
          $('.next_btn').each(function(){
            this.addEventListener("click",function(ev){
              var id = this.id;
              console.log(id);
              if(id == 'shjy'){//生活检验           
                document.getElementsByName("content_iframe")[0].src = "m?xwl=mobile_yf/detectionByDoor/LifeDetection";
              }else if(id == 'jyjc'){//基因检验
                document.getElementsByName("content_iframe")[0].src = "m?xwl=mobile_yf/mPersonalCenter/mHealthService";
              }
            });
          })     
        }

注：

document.getElementsByName("content\_iframe")\[0\]，

【0】主要是因为"content\_iframe"是class不是id

[http_t.csdn.cn_frAZz]: http://t.csdn.cn/frAZz

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现iframe路由切换

页面内嵌套页面，可使用iframe实现  <div class="div_content">

た入场券/ 2023年10月03日 20:03/ 0 赞/ 3 阅读

相关前端路由+原生JS实现SPA

![2d7341c04e2f401781ba51a864b33c70.gif][] ●前端路由 ●路由: 就是一一对应关系的集合 ●前端路由: 就是一个 url 地址

古城微笑少年丶/ 2023年09月27日 22:33/ 0 赞/ 107 阅读

相关 nuxt.js 路由和路由参数

nuxt.js 的路由会直接在pages中新建文件夹或文件后自动生成。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

系统管理员/ 2022年10月04日 14:57/ 0 赞/ 257 阅读

相关 JS路由

一个极简前端路由实现说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hash

青旅半醒/ 2022年06月17日 07:49/ 0 赞/ 203 阅读

相关路由-标签切换

效果： ![Center][] 依赖： <link href="https://cdn.bootcss.com/ionic/1

青旅半醒/ 2022年06月07日 11:49/ 0 赞/ 211 阅读

相关 JS实现路由跳转

之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。示例图： ![Center][] 源码： <!DOCTYPE html>

柔情只为你懂/ 2022年06月07日 09:10/ 0 赞/ 322 阅读

相关路由守卫-vue切换路由登录判断、条件判断

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各

清疚/ 2022年05月17日 07:53/ 0 赞/ 328 阅读

相关 javascript 实现Vue.js路由

javascript 原生实现 Vue.js的路由切换功能，模拟单页应用上效果图： ![70][] ![70 1][] 源码如下： <!--

男娘i/ 2022年05月06日 04:56/ 0 赞/ 178 阅读

相关 react--实现js跳转路由

实现js跳转路由： / 实现js跳转路由：https://reacttraining.com/react-router/web/exampl

雨点打透心脏的1/2处/ 2021年12月11日 00:17/ 0 赞/ 315 阅读

相关 AngularJS使用路由切换视图

AngularJS使用路由切换视图，下面是一个简单的学生信息管理实例。注意：除了引用angular.js之外，还要引用angular-route.js。 1、创建inde

￡神魔★判官ぃ/ 2021年09月11日 00:16/ 0 赞/ 414 阅读