首页嵌入窗口长、宽都为100%

嵌入窗口长、宽都为100%

时间: 2024-04-15 17:31:11 浏览: 81

如果您想要将嵌入窗口的长宽都设置为100%，请修改之前的代码如下： ```html <!DOCTYPE html> <html> <head> <style> .loader { border: 16px solid #f3f3f3; border-top: 16px solid yellow; border-radius: 50%; width: 120px; height: 120px; animation: spin 5s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 添加隐藏类 */ .hidden { display: none; } /* 设置嵌入窗口的样式 */ .content { width: 100%; height: 100%; border: none; } </style> </head> <body> <div id="loader" class="loader"></div>  <iframe id="content" src="your_file.html" frameborder="0" class="hidden"></iframe> <script> // 获取小球和内容 iframe 的引用 const loader = document.getElementById("loader"); const content = document.getElementById("content"); // 监听小球动画结束事件 loader.addEventListener("animationend", function() { // 隐藏小球 loader.classList.add("hidden"); // 显示内容 iframe content.classList.remove("hidden"); }); </script> </body> </html> ``` 在上述代码中，我们添加了一个 `.content` 类来设置嵌入窗口的样式，将其宽度和高度都设置为100%。这样，嵌入窗口将填充整个容器的宽度和高度。记得将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。

阅读全文