写一个右边菜单加载iframe
时间: 2023-07-18 18:51:08 浏览: 44
好的,以下是一个简单的示例代码,用于在右边菜单区域加载一个iframe:
```html
<!DOCTYPE html>
<html>
<head>
<title>右边菜单加载iframe</title>
<style type="text/css">
#menu {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: #eee;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
iframe {
width: 100%;
height: calc(100% - 20px);
border: none;
}
</style>
</head>
<body>
<div id="menu">
<h2>菜单标题</h2>
<p>菜单内容</p>
</div>
<script type="text/javascript">
// 获取菜单元素和iframe元素
var menu = document.getElementById("menu");
var iframe = document.createElement("iframe");
// 设置iframe的src属性
iframe.src = "https://www.baidu.com";
// 将iframe添加到菜单元素中
menu.appendChild(iframe);
</script>
</body>
</html>
```
以上代码中,我们使用了CSS的`position:fixed`属性将右边菜单固定在浏览器窗口的右侧,然后使用JavaScript动态地创建了一个iframe元素,并将其添加到菜单元素中。我们还设置了iframe的src属性,以便在加载时显示指定的网页。