• ifream标签中的子页面，操作父页面的元素

    问题描述：子页面内容发生变化时，导航栏不会跟切换

    解决办法：

    window.parent.document.getElementById

    demo

    html1

    1. <html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     
    5.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    6. head>
    7. <body>
    8. <div id="app">
    9.     <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
    10.         <el-menu-item id="t1" index="1">处理中心el-menu-item>
    11.         <el-menu-item id="t2" index="2"> 我的工作台el-menu-item>
    12.         <el-menu-item id="t3" index="3">消息中心el-menu-item>
    13.         <el-menu-item id="t4" index="4">订单管理el-menu-item>
    14.     el-menu>
    15. div>
    16. <div>
    17.     <iframe src="html2.html">iframe>
    18. div>
    19. body>
    21. <script src="https://unpkg.com/vue@2/dist/vue.js">script>
    23. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    24. <script>
    25.     new Vue({
    26.         el: '#app',
    27.         data: function () {
    28.             return {visible: false}
    29.         }
    30.     })
    31. script>
    32. html>

    html2

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9. <script>
    10.     function sendMessage() {
    11.         let t1 = window.parent.document.getElementById("t1")
    12.         t1.classList.remove("is-active")
    13.         let t2 = window.parent.document.getElementById("t2")
    14.         t2.classList.add("is-active")
    15.     }
    16. script>
    17. <h1>22222222h1>
    18. <button onclick="sendMessage()">sendMessagebutton>
    19. body>
    20. html>

    在html1中引入html2，在html2中操作html1中的导航元素。

    通过点击html2中的按钮，触发。

    验证：

     点击html2中的按钮后，将  处理中心的 is-active 移除  为  我的工作台   添加   is-avtive

    点击之后能看到，明显的样式变化，我的工作台增加的class  is-active

  • 相关阅读:
    第八章 排序 十二、败者树
    接口压力测试 jmeter--增强篇(二)
    谷粒商城 (四) --------- 项目结构创建 & 初始化数据库
    Python code模块
    非范型ArrayList和泛型List＜T＞
    第15章： 泛型
    rotation matrix &reflection matrix
    Codeforces Round 900 (Div. 3)
    k8s 读书笔记 - kubectl 命令行工具用法详解
    SQ4840EY-T1_GE3具有低导通电阻和低电压降 汽车级 N沟道功率MOSFET
  • 原文地址：https://blog.csdn.net/Ipkiss_Yongheng/article/details/134255535