网站介绍
本示例演示了一个简单的网页，该网页使用iframe元素嵌入了一个外部网站(https://weiluodiye32.com/)。以下是代码的解析和说明。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>嵌入外部网站示例</title>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
iframe {
max-width: 100%;
max-height: 100%;
border: none;
background: #fff;
}
div1 {
position: absolute;
width: 100%;
height: calc(100% - 80px); /* 根据实际需要调整iframe的高度 */
overflow: auto;
}
div {
width: calc(100% + 2px); /* 为了避免滚动条被隐藏，在iframe内部添加一些额外的宽度 */
font-size: 16px; /* 根据需要调整字体大小 */
}
</style>
</head>
<body>
<div id="container" style="text-align: center;">
<div id="content"></div> <!-- 用于显示iframe的内容 -->
</div>
<script src="main.js"></script> <!-- JavaScript代码 -->
</body>
</html>
JavaScript代码 (main.js)
”`javascript var content = document.getElementById(“content”); // 通过id获取内容元素的引用 var url = ‘https://weiluodiye32.com/’; // 要嵌入的外部网站URL var options = “width=device-width, initial-scale=1”; // 其他选项可以根据需要进行设置 options += “, maximum-scale=1”; // 防止最大缩放为1(防止页面失真) options += “, user-scalable=no”; // 防止用户手动缩放页面(保持固定大小) content.innerHTML = ‘’; // 将iframe插入到内容元素中 content.innerHTML += ‘
注意： 请根据实际情况调整iframe的高度和其他选项。
