嵌入网页文件
<html>
<head>
<meta charset="utf-8" />
>title<page nesting</title>
</head>
<body>
<! --Navigation column header location -->
80" 80"= height"100%"= width"header.html"iframe" scrolling="no" frameborder="no"></iframe>
>"content" =iddiv<I am content</div>
<! --End footer position -->
80" 80"= height"100%"= width"footer.html"iframe" scrolling="no" frameborder="no"></iframe>
</body>
</html>添加一个ifram 嵌入网页全屏显示按钮
code here...上面代码，可以将header.html替换为其他网页文件
Embed url
<html>
<head>
>title<Cloud Music</title>
</head>
<body>
<iframe src="http://www.tuwei.space/home.html" width="100%" height="1000" frameborder="0" allowfullscreen="true"></iframe>
</body>
</html>上面代码，width 是100%, 表示可以根据窗口大小自动铺满，allowfullscreen表示容许全屏
Embed search engine dialog box
<form action="http://www.baidu.com/baidu" target="_blank">
<table bgcolor="#FFFFFF"><tr><td>
<input name=tn type=hidden value=baidu>
<a href="http://www.baidu.com/">
<img src="http://img.baidu.com/img/logo-80px.gif" alt="Baidu" align="bottom" border="0">
</a>
<input type=text name=word size=30>
<input type="submit" value="百度搜索">
</td></tr>
</table>
</form>效果：
添加全屏按钮
<html>
<head>
<style>
#myFrame {
width: 100vw;
height: 100vh;
}
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background-color: #ffffff;
}
</style>
</head>
<body>
<button onclick="openFullscreen()">全屏显示</button>
<div id="myFrame">
<iframe id="iframeContent" src="https://www.pilisf.com" width="100%" height="1000" frameborder="0" allowfullscreen="true"></iframe>
<div id="fullscreenOverlay" class="fullscreen" style="display:none;"></div>
</div>
<script>
var iframe = document.getElementById("iframeContent");
function openFullscreen() {
var fullscreenOverlay = document.getElementById("fullscreenOverlay");
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
} else {
fullscreenOverlay.style.display = "block";
}
}
</script>
</body>
</html>效果：
点击全屏显示，嵌入网页就会全屏显示
评论 (0)