如何使用JavaScript和HTML按钮在iframe中切换不同URL

嘿，作为新手完全不用担心，这个需求超级好实现！我给你写了一套极简代码，复制粘贴就能跑，每一步都给你注释明白了，跟着看就行～

完整代码（直接用） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的菜单页面</title>
    <style>
        /* 简单美化按钮，新手可以直接用，也能自己改颜色、大小 */
        .menu-btn {
            padding: 10px 20px;
            margin: 0 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .menu-btn:hover {
            background-color: #45a049; /* 鼠标悬停变色 */
        }
        /* 设置iframe的大小，你可以自己调整宽高 */
        #content-frame {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 四个菜单按钮，点击就切换iframe的内容 -->
    <button class="menu-btn" onclick="changeFrame('https://www.example.com')">首页</button>
    <button class="menu-btn" onclick="changeFrame('https://www.example.com/page1')">页面1</button>
    <button class="menu-btn" onclick="changeFrame('https://www.example.com/page2')">页面2</button>
    <button class="menu-btn" onclick="changeFrame('https://www.example.com/page3')">页面3</button>

    <!-- 用来显示内容的iframe，初始显示首页 -->
    <iframe id="content-frame" src="https://www.example.com"></iframe>

    <script>
        // 核心函数：修改iframe的src属性来切换页面
        function changeFrame(url) {
            // 获取iframe元素
            const frame = document.getElementById('content-frame');
            // 把传入的URL赋值给iframe的src
            frame.src = url;
        }
    </script>
</body>
</html>

关键部分解释 #

1. HTML结构 #

• 四个<button>按钮：每个按钮通过onclick调用changeFrame()函数，同时传入要跳转的URL
• 一个<iframe>标签：id="content-frame"用来让JS快速定位它，src属性是页面加载时默认显示的内容

2. CSS样式 #

• 给按钮加了基础的颜色、内边距和悬停效果，避免菜单太简陋，新手可以直接替换颜色值（比如把#4CAF50换成你喜欢的颜色）
• 固定了iframe的宽高，你可以根据需求调整width和height的数值

3. JavaScript逻辑 #

• 只有一个核心函数changeFrame(url)：
  1. 通过document.getElementById找到页面中的iframe元素
  2. 把按钮传入的URL赋值给iframe的src属性，瞬间完成内容切换，完全不用打开新窗口

新手注意事项 #

• 替换代码里的https://www.example.com这些URL为你自己的页面地址
• 有些网站会禁止被嵌入到iframe里（比如Google、B站等），遇到这种情况换自己的页面或者允许嵌入的网站就行
• 样式部分可以随便改，比如按钮的大小、圆角，iframe的边框样式，怎么顺眼怎么来

内容的提问来源于stack exchange，提问作者Sv443