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

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

解决办法：

window.parent.document.getElementById

demo

html1


<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>
<body>
<div id="app">
    <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
        <el-menu-item id="t1" index="1">处理中心el-menu-item>
        <el-menu-item id="t2" index="2"> 我的工作台el-menu-item>
        <el-menu-item id="t3" index="3">消息中心el-menu-item>
        <el-menu-item id="t4" index="4">订单管理el-menu-item>
    el-menu>
div>
<div>
    <iframe src="html2.html">iframe>
div>
body>
<script src="https://unpkg.com/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {visible: false}
        }
    })
script>
html>

html2


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
<script>
    function sendMessage() {
        let t1 = window.parent.document.getElementById("t1")
        t1.classList.remove("is-active")
        let t2 = window.parent.document.getElementById("t2")
        t2.classList.add("is-active")
    }
script>
<h1>22222222h1>
<button onclick="sendMessage()">sendMessagebutton>
body>
html>

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

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

验证：

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

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

相关阅读:
MindSpore使用Summary收集数据（MindInsight）警告已有相同的值
特征识别和匹配
2023计算机毕业设计选题推荐——Java项目
SpringDoc API文档工具集成SpringBoot - Swagger3
SQL语句学习+牛客基础39SQL
[MATLAB学习]：Matlab生成滑动平均滤波算法文件并移植到STM32单片机上运行——基于CubeMX
Prometheus监控Kafka（三种方法JMX/Kafka_exporter/KMINION监控Kafka）
[导弹打飞机H5动画制作] 导弹每次飞行的随机路线制作
如何禁用 HTTP TRACE/TRACK
Unittest 框架介绍及第一个demo

原文地址：https://blog.csdn.net/Ipkiss_Yongheng/article/details/134255535