在HTML中如何设置切换框架

Hey小伙伴们，今天来聊个超实用的小技巧——在HTML中设置切换框架，是不是听起来有点技术宅？别急，我保证这会是个让你眼前一亮的小技能，让你的网站或网页更加炫酷和互动！

我们得明白什么是框架，框架，或者说iframe，是一种HTML元素，可以让你在一个页面中嵌入另一个页面，想象一下，你在看一个网页，然后这个网页里还有个小窗口，显示着另一个网站的内容，这就是框架的魅力所在。

如何设置一个可以切换的框架呢？这就需要用到JavaScript和一点CSS来帮忙了，下面，我会一步步带你入门。

基础HTML结构

我们需要创建一个基础的HTML结构，用来放置我们的框架和控制按钮，这里是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Switchable Iframe Demo</title>
    <style>
        .iframe-container {
            position: relative;
            width: 600px;
            height: 400px;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe id="myIframe" src="initial-page.html"></iframe>
    </div>
    <button onclick="changeFrame('page1.html')">Page 1</button>
    <button onclick="changeFrame('page2.html')">Page 2</button>
    <script>
        function changeFrame(page) {
            document.getElementById('myIframe').src = page;
        }
    </script>
</body>
</html>

在这个例子中，我们有一个iframe元素，它的src属性初始指向initial-page.html，我们还有两个按钮，点击它们会调用changeFrame函数，这个函数会改变iframe的src属性，从而切换显示的页面。

CSS样式

在style标签中，我们定义了一些基本的样式。.iframe-container用来包裹iframe，确保它在页面中的位置和大小。iframe本身被设置为无边框，并且填满整个容器，按钮则简单地设置了外边距。

JavaScript函数

在script标签中，我们定义了changeFrame函数，这个函数接受一个参数page，这是我们要切换到的新页面的URL，函数通过获取iframe元素，并设置其src属性为传入的page值来工作。

进阶：动态添加按钮

如果你想让页面更加动态，比如根据页面的数量动态生成按钮，你可以使用JavaScript来实现，这里是一个简单的例子：

// 假设你有一个包含页面URL的数组
var pages = ['page1.html', 'page2.html', 'page3.html'];
// 获取按钮容器
var buttonContainer = document.createElement('div');
// 遍历页面数组，为每个页面创建一个按钮
pages.forEach(function(page) {
    var button = document.createElement('button');
    button.textContent = 'Page ' + (pages.indexOf(page) + 1);
    button.onclick = function() {
        changeFrame(page);
    };
    buttonContainer.appendChild(button);
});
// 将按钮容器添加到页面中
document.body.appendChild(buttonContainer);

这段代码会根据pages数组中的URL动态创建按钮，并为每个按钮设置点击事件，当点击时会调用changeFrame函数。