HTML 框架

HTML 框架 <iframe>标签规定一个内联框架。　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。　iframe 语法： <iframe src="URL
HTML 框架

</code>标签规定一个内联框架。</p><p>　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。</p><p class="intro">　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</p><p><strong>　iframe 语法：</strong></p><div class="example"> <div class="example_code notranslate"> <p><iframe src="URL">
　该URL指向不同的网页，将窗口内容显示为URL地址指向页面。

Iframe - 设置高度与宽度
 
height和width属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").
     实例
     
    
 尝试一下 » 

Iframe - 移除边框
 
frameborder属性用于定义iframe表示是否显示边框。
　设置属性值为 "0" 移除iframe的边框:
     实例
     
    
 尝试一下 » 

使用 iframe 来显示目录链接页面
 
iframe可以显示一个目标链接的页面
　目标链接的属性必须使用iframe的属性，如下实例：
     实例
             
W3CSCHOOL.CN
    
 尝试一下 » 

HTML iframe 标签
 
                        标签             说明         
                    </a>            </td>            <td style="text-align: center;">定义一个内联的 iframe</td>        </tr>    </tbody></table><br><h2>iframe 标准属性</h2><hr><table class="reference" class="reference notranslate">    <tbody>        <tr>            <th style="text-align: center;" align="left">属性</th>            <th style="text-align: center;" align="left">说明</th>        </tr>        <tr>            <td style="text-align: center;"><a href="https://www.w3cschool.cn/htmltags/att-global-class.html" target="_blank">class                </a>                <br>            </td>            <td style="text-align: center;">规定元素的类名（classname）                <br>            </td>        </tr>        <tr>            <td style="text-align: center;"> <a href="https://www.w3cschool.cn/htmltags/att-global-id.html" target="_blank">id</a>            </td>            <td style="text-align: center;">规定元素的唯一 id                <br>            </td>        </tr>        <tr>            <td style="text-align: center;"> <a href="https://www.w3cschool.cn/htmltags/att-global-style.html" target="_blank">style</a>            </td>            <td style="text-align: center;">规定元素的行内样式（inline style）                <br>            </td>        </tr>        <tr>            <td style="text-align: center;"> <a href="https://www.w3cschool.cn/htmltags/att-global-title.html" target="_blank">title</a>            </td>            <td style="text-align: center;">规定元素的额外信息（可在工具提示中显示）</td>        </tr>    </tbody></table><p>    <br></p><h2>HTML <frameset>标签 - <font color="#ff0000">HTML5 不支持</font></h2><hr><p><code><frameset></code>标签在一个页面中设置一个或多个框架，用<code><frameset></code><code></frameset></code>代替了<code><body></code><code></body></code>，不能出现在<code>body</code>标签里。</p><p><b>　<frameset> 语法：</b></p><div class="example">    <div class="example_code notranslate">        <p><frameset></p>        <p><frame src="menu.html"></p>        <p><frame src="content.html"></p>        <p></frameset></p>    </div></div><ul>    <li><code>frameset</code>- 建立框架的标记，将在其中定义各个框架。</li>    <li><code>frame src</code>- 指示框架显示内容URL地址。</li></ul><br><h2><frameset> - 设置行列比例</h2><hr><p><code><frameset></code>标签中我们使用<code>rows</code>设置行的占页面的百分比；<code>cols</code>设置列的所占百分比。</p><div class="example">     <h2 class="example">实例</h2>    <div class="example_code notranslate">        <p><frameset rows="20%,*"></p>        <p><frame src="title.html"></p>        <p><frameset cols="30%,*"></p>        <p><frame src="menu.html"></p>        <p><frame src="content.html"></p>        <p></frameset></p>        <p></frameset></p>    </div>    <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryhtml_iframes_5" class="tryitbtn">尝试一下 »</a></div><ul>    <li><code>frameset cols</code>- 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的 30％，并且我们使用<code>“*”</code>符号来指示剩余百分比。</li>    <li><code>frameset rows</code>- 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为 20％，剩下的剩余空间将在<code>menu.html</code>和<code>content.html</code>之间划分。</li></ul><br><h2><frameset> - 设置边框 </h2><hr><p>　框架有一些边框线，大多数时候都不需要。<code><frameset></code>标签中我们使用<code>frameborder</code>和<code>framespacing</code>属性可以擦除它们。</p><blockquote>    <p><b>注意：</b><code>frameset</code>和<code>frameborder</code>是相同的属性。</p></blockquote><div class="example">     <h2 class="example">实例</h2>    <div class="example_code notranslate">        <p><frameset border="0" frameborder="0" framespacing="0" rows="20%,*"></p>        <p><frame src="title.html"></p>        <p><frameset border="0" frameborder="0" framespacing="0" cols="30%,*"></p>        <p><frame src="menu.html"></p>        <p><frame src="content.html"></p>        <p></frameset></p>        <p></frameset></p>    </div>    <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryhtml_iframes_6" class="tryitbtn">尝试一下 »</a></div><ul>    <li><code>frameborder</code>-设置边框， 0 值表示没有边框</li>    <li><code>border</code>- 修改边框的粗细（由 Netscape 浏览器使用）</li>    <li><code>framespacing</code>- 修改边框的粗细（由 Internet Explorer 浏览器使用）</li></ul><br><h2><frame> - 设置名字 - <font color="#ff0000">HTML5 不支持 </font></h2><hr><p><code><frame></code>标签中我们使用<code>name</code>属性命名每个框架，而不是内容页面。</p><div class="example">     <h2 class="example">实例</h2>     <div class="example_code notranslate">        <p><frameset rows="20%,*"></p>        <p><frame name="title" src="title.html"></p>        <p><frameset cols="30%,*"></p>        <p><frame name="menu" src="menu.html"></p>        <p><name="content" src="content.html"></p>        <p></frameset></p>        <p></frameset></p>    </div>    <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryhtml_iframes_7" class="tryitbtn">尝试一下 »</a></div><h2><frame> - 设置滚动</h2><hr><p><code><frame></code>标签中我们使用<code>noresize</code>设置禁止用户拖拉框架大小；<code>scrolling</code>用于设置滚动条是否显示。</p><div class="example">     <h2 class="example">实例</h2>     <div class="example_code notranslate">        <p><frameset border="2" frameborder="1" framespacing="2" rows="20%,*"></p>        <p><frame src="title.html" noresize scrolling="no"></p>        <p><frameset border="4" frameborder="1" framespacing="4" cols="30%,*"></p>        <p><frame src="menu.html" scrolling="auto" noresize></p>        <p><frame src="content.html" scrolling="yes" noresize></p>        <p></frameset></p>        <p></frameset></p>    </div>    <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryhtml_iframes_8" class="tryitbtn">尝试一下 »</a></div><ul>    <li><code>noresize</code>- 不允许用户更改其尺寸。</li>    <li><code>scrolling</code>- 设置滚动条是否显示。</li></ul><p>    <br></p></div>
                    </article>
                    
                </div>
            </div>
        </ggg>
        <aside class="d-none d-lg-block col-lg-2">
            <section>
                <div class="">
                    <form action="/helpdoc/Search" target="_blank" autocomplete="off">
    <div class="input-group">
        <input type="text" name="kw" value="" class="form-control" placeholder="输入关键词搜索">
        <button class="btn btn-outline-secondary" type="submit">搜索</button>
    </div>
</form>
                </div>
                
<div class="list-group-item-heading mt-2">
    <h4>推荐阅读</h4>
</div>
<ul class="list-group mb-2 sticky-top">
        <li class="list-group-item">
            <a href="/detail/2022/1104/F7FB841F63C49909" class="w-100 d-inline-block text-truncate" title=".NET(C#)中new Dictionary(字典)初始化值(initializer默认值)" target="_blank">
                .NET(C#)中new Dictionary(字典)初始化值(initializer默认值)
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1104/B6A184556D37861D" class="w-100 d-inline-block text-truncate" title=".NET Core调用 SOAP(WCF)服务的方法及示例代码" target="_blank">
                .NET Core调用 SOAP(WCF)服务的方法及示例代码
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1104/B996B2853FD5716B" class="w-100 d-inline-block text-truncate" title="Java 查找打印机指定打印机名称打印代码(DocPrintJob)" target="_blank">
                Java 查找打印机指定打印机名称打印代码(DocPrintJob)
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1104/6659311084593BEC" class="w-100 d-inline-block text-truncate" title="Python pandas.DataFrame.combine函数方法的使用" target="_blank">
                Python pandas.DataFrame.combine函数方法的使用
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1104/889ACC15A5CB67E9" class="w-100 d-inline-block text-truncate" title="Linux iptables防火墙的使用配置" target="_blank">
                Linux iptables防火墙的使用配置
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1107/7A2CB4836B6C6D84" class="w-100 d-inline-block text-truncate" title="Spring MVC  - 有用的资源" target="_blank">
                Spring MVC  - 有用的资源
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/026EBB3602FD3D30" class="w-100 d-inline-block text-truncate" title="Apache Commons IO  -  FileSystemUtils" target="_blank">
                Apache Commons IO  -  FileSystemUtils
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/CA7B3D55A95A0EEA" class="w-100 d-inline-block text-truncate" title="TestLodge  - 有用的资源" target="_blank">
                TestLodge  - 有用的资源
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/C2C5A54AC3C8A9D6" class="w-100 d-inline-block text-truncate" title="CSS  - 可见性" target="_blank">
                CSS  - 可见性
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/24458047651906B4" class="w-100 d-inline-block text-truncate" title="Microsoft Visio  - 处理冲突" target="_blank">
                Microsoft Visio  - 处理冲突
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/A810DC8C4F7EFF33" class="w-100 d-inline-block text-truncate" title="Windows 10 Dev  -  XAML性能" target="_blank">
                Windows 10 Dev  -  XAML性能
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/7CCB078320BB3719" class="w-100 d-inline-block text-truncate" title="Python区块链 - 简介" target="_blank">
                Python区块链 - 简介
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/C68E17B98AFC75AD" class="w-100 d-inline-block text-truncate" title="Python  - 字符串" target="_blank">
                Python  - 字符串
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/A5B4D90AB7E6982C" class="w-100 d-inline-block text-truncate" title="DynamoDB  - 表活动" target="_blank">
                DynamoDB  - 表活动
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/5EAFB36BB77C6AF5" class="w-100 d-inline-block text-truncate" title="MariaDB  - 临时表" target="_blank">
                MariaDB  - 临时表
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/2A2F7B95F3C275CC" class="w-100 d-inline-block text-truncate" title="DocumentDB SQL  - 参数化" target="_blank">
                DocumentDB SQL  - 参数化
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/0D707B5AD35FF5E2" class="w-100 d-inline-block text-truncate" title="Q语言 - 类型铸造" target="_blank">
                Q语言 - 类型铸造
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2022/1108/8FF8BA479B9AFF61" class="w-100 d-inline-block text-truncate" title="VSAM  - 命令" target="_blank">
                VSAM  - 命令
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2023/0131/3F4A8F85D420476D" class="w-100 d-inline-block text-truncate" title="Go 语言循环语句" target="_blank">
                Go 语言循环语句
            </a>
        </li>
        <li class="list-group-item">
            <a href="/detail/2023/0306/BC8D6446BDE9D711" class="w-100 d-inline-block text-truncate" title="CSS3 rotation 属性" target="_blank">
                CSS3 rotation 属性
            </a>
        </li>
</ul>
            </section>
        </aside>
    </article>
</main>



    </section>
    <footer class="footer">
        <div class="container-fluid footer-widget">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-4 col-lg-4">
                        <h3 class="text-start">幻海十年，专注互联网</h3>
                        <ul class="d-flex px-0" style="text-align: left; flex-wrap: wrap">
                            <li class="item-3 mb-1">
                                <a target="_blank" href="https://wx.jonvie.com" rel="noopener noreferrer" title="几微助手">
                                    <span>几微助手</span>
                                </a>
                            </li>
                            <li class="item-3">
                                <a target="_blank" href="http://www.wonhero.com/" rel="noopener noreferrer" title="幻海官网">
                                    <span>幻海官网</span>
                                </a>
                            </li>
                            <li class="item-3">
                                <a target="_blank" href="http://www.rssso.com/" rel="noopener noreferrer" title="幻海优品">
                                    <span>幻海优品</span>
                                </a>
                            </li>
                            <li class="item-3 mb-1">
                                <a target="_blank" href="http://www.xct.cn" rel="noopener noreferrer" title="新彩天">
                                    <span>新彩天</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-4 col-lg-4">
                        <h3 class="text-start">关于</h3>
                        <div class="text-start">
                            <span>
                                幻海科技成立于2009年，是一家集互联网基础技术服务、网络平台运营服务、软件产品研发、行业软件定制、自营电商平台于一体的专业互联网公司
                            </span>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 col-lg-4">
                        <h3 class="text-center">联系</h3>
                        <div>
                            <img src="http://www.jonvie.com/static/images/rightbar/QRcode.png?v=23" width="80" height="80" alt="微信公众号" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="margin-top: 10px;">
            <div class="row">
                <div class="col-12 site-info">
                    <div class="item">
                        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener external nofollow noreferrer">
                            粤ICP备09219857号
                        </a>
                    </div>
                </div>
                <div class="item">2009-2025 Copyright Wonhero.Com All Rights Reserved</div>
                <div class="item">深圳幻海软件技术有限公司 版权所有</div>
            </div>
        </div>
    </footer>
    <div id="toTop" style="display: none">返回顶部</div>
    <script src="//static.jonvie.com/wonhero/jquery/jquery.min.js"></script>
    <script src="//static.jonvie.com/wonhero/bootstrap/bootstrap.min.js"></script>
    
    <script>
        document.querySelectorAll('pre.prettyprint').forEach(el => {
            hljs.highlightElement(el);
        });
    </script>
    <script>
        const total = Number("57");
        let loading = document.querySelector(".loading");
        loading.style.display = "none";
        let currentpage = 2;
        let limit = 50;
        let isMore = total > limit;

        // 用于计算当前元素距离浏览器顶部距离
        function getElementTop(el) {
            if (el.offsetParent ) {
                return getElementTop(el.offsetParent ) + el.offsetTop
            }
            return el.offsetTop
        }
        // 监听滚动条
        document.addEventListener("scroll",init);
        // 临界点判断
        function init(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop  // 滚动条
            let sidebarTop = getElementTop(document.querySelector(".sort-sidebar"));
            let sidebarHeight = document.querySelector(".classify").offsetHeight;
            if (sidebarTop + sidebarHeight < (scrollTop + document.documentElement.clientHeight) && isMore) {
                getSideBar(currentpage, limit)  // 请求数据
            }
        }
        init();
        // 获取数据
        function getSideBar(page, limit) {
            try {
                isMore = false;
                fetch(`/api/ManagerApi/GetPageArtitlesByCls?page=${page}&limit=${limit}&channel=devdoc&clsId=EF539ABFB06125CC`)
                    .then(resp => resp.json())
                    .then(res => {
                        if (res.Success) {
                            isMore = (page - 1) * limit + res.Data.Item2.length < total;
                            if (isMore) currentpage += 1;
                            renderSidebar(res.Data.Item2); // 渲染列表
                        }
                    });
            } catch (e) {
                console.log(e, 23)
            }
        }
        // 渲染列表
        function renderSidebar(list = []) {
            if (!list.length) return;
            let template = list.map(item => {
                return `<li class="list-group-item" style="border: 0px">
                                    <a class="w-100 d-inline-block text-truncate" title="${item.ContentTitle}" href="/detail/${item.ContentID}" target="_blank">
                                        ${item.ContentTitle}
                                    </a>
                                </li>`
            }).join("");
            document.querySelector(".classify").innerHTML = document.querySelector(".classify").innerHTML + template;
        }
    </script>

    <script>
        ;(()=>{
         var height = $(window).height();
            $(window).scroll(function() {
                if ($(window).scrollTop() > height) {
                    $("#toTop").fadeIn(500);
                } else {
                    $("#toTop").fadeOut(500);
                }
            });
            $("#toTop").click(function() {
                $('body,html').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
        })();
    </script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?843cad737da0ae856cb26e84eafcd9bb";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({ id: "Jzndc69N7BtnPgpT", ck: "Jzndc69N7BtnPgpT" })</script>
</body>
</html>