iframe的使用

最新推荐文章于 2023-11-24 10:51:22 发布

张木木爱熬夜

最新推荐文章于 2023-11-24 10:51:22 发布

阅读量95

点赞数

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_44030791/article/details/116499058

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe使用</title>
    <style type="text/css">
         body{
            height:100% auto;
            width:100% auto;
        }
        table{
            height: 990px;
            width: 100%;
        }
    </style>
</head>
<body>
    <table >
        <tr style="background-color: #aaa;height:10%">
            <td colspan="3" style="height: 10%;width: 100%;font-size:30px;text-align: center"  >神州行，我看行……</td>
        </tr>
        <tr style="height:80%;background-color: gray">
            <td style="width:20%;color: green">
                <ul  style="list-style:none;line-height: 100px">
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                    <li><a href="http://www.baidu.com" target="myframe"><img src="./baidu.png" alt="百度"></a></li>
                </ul>
            </td>
            <td colspan="2" style="width: 80%">
                <iframe src="http://www.taobao.com" width="100%" height="100%" name="myframe"></iframe>
            </td>
        </tr>
        <tr style="background-color: red;height:10%">
            <td colspan="3" style="font-size:30px;text-align: center ">由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

            </td>
        </tr>
</table>
</body>
</html>

缺点:
1.会阻塞主页面的onload事件
2.搜索引擎无法解读这种页面,不利于seo
3.iframe和主页面共享连接池,而浏览器对相同区域有限制所以会影响性能

张木木爱熬夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iframe使用</title> <style type="text/css"> .
复制链接

扫一扫