iframe标签的使用(Use of iframe Tags)

<!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 的高度由内容撑起。

————————
<!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>

I use the native import page   Iframe tag is found to have no effect. After searching:

  给 <!DOCTYPE html> 标签里加上  PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

And add to the HTML tag   xmlns=” http://www.w3.org/1999/xhtml “

Then start the page to see the effect.

<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>

If you want iframe tags to be highly adaptive, you can try this function I encapsulated

Because the iframe tag has its own default width and height, you can also set it directly

The width of iframe can be set to 100%, but the height cannot be set. I can make the height of iframe supported by the content in this method.