<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe id="index1" name="index1" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index1.html" width="100%" height="0"></iframe>
<h1>主页---------</h1>
<iframe id="index2" name="index2" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index2.html" width="100%" height="0"></iframe>
</body>
</html>
我使用原生引入页面用到 iframe 标签，发现没有效果，经查找：
给 <!DOCTYPE html> 标签里加上 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
还有给 html 标签 里加上 xmlns="http://www.w3.org/1999/xhtml"
然后启动页面就可以看到效果了。
<script>
// 定义iframe高度自适应的函数
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
console.log(iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight,'8502')
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
// 页面加载完成iframe高度自适应
window.onload = function () {
setIframeHeight(document.getElementById('index1'));
setIframeHeight(document.getElementById('index2'));
console.log('onload');
};
</script>
如果你想iframe 标签可以高度自适应可以试试我封装的这个函数
因为iframe 标签是有自己的默认宽高，你也可以直接设死
iframe 的宽度可以设置百分百，但是高度不能，我这个方法可以让iframe 的高度由内容撑起。