深入理解iframe菜鸟教程

一、什么是iframe？


<iframe>

是HTML中的一个元素，用于在当前HTML文档中嵌入一个子HTML文档。简单来说，它可以在网页中展示另一个网页。当我们引入其他网站的信息时，可以使用iframe的方法来实现。

它的语法如下：


<iframe src="url"> </iframe>

其中src属性用于指定嵌入文档的URL，可以使用绝对路径或相对路径。除了src属性，


<iframe>

还可以设置多个属性，如高度（height）,宽度（width）等等。

二、怎样应用iframe？

在使用iframe时，需要注意以下几点：

1、安全性

在使用iframe时，需要避免与任何具有恶意攻击的网站进行连接。为了减少安全隐患，在使用iframe时可以指定 sandbox 属性，如下：


<iframe src="url" sandbox="allow-top-navigation allow-scripts">
</iframe>

该属性详细介绍：

allow-top-navigation：允许被嵌入文档中的iframe中导航到的顶级导航内容（例如，通过用户输入）。没有该属性，iframe中的一个网站可以通过点击打开与嵌套页面相同的页面，从而将用户重定向到网络钓鱼网站等页面。

allow-scripts: 允许iframe 中运行脚本。（默认情况下不允许）

实际使用时根据需要的安全性进行选择。

2、尺寸调整

在使用iframe时，如果需要固定其大小，可以使用height、width属性。但是当页面发生缩放时，iframe中的文档却未必缩放。为了使iframe中嵌入的文档能够自适应大小，可以使用JavaScript实现。

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
    iframe.width = iframe.contentWindow.document.documentElement.scrollWidth + 'px';
}

其中，


contentWindow

表示子窗体的窗体，


document

表示子窗体文档对象。在实现时，应该在iframe元素的


onload

事件中调用resizeIframe方法。

三、iframe应用实例

1. 嵌入其他网站的内容

在以下示例中，我们可以通过


<iframe>

绑定其他网站的URL，实现在我们的网站中加入其他网站的内容。


<!DOCTYPE html>
<html>
<head>
    <title>Iframe Demo</title>
</head>
<body>
    <iframe src='https://www.baidu.com'></iframe>
</body>
</html>

2. 表单嵌入其他网站

在以下示例中，我们将会通过


<iframe>

嵌入其他网站的内容，同时提交表单过程也会由嵌入的网站进行处理。


<!DOCTYPE html>
<html>
<head>
    <title>Iframe表单例子</title>
</head>
<body>
    <form id="myForm" method="post" action="https://www.baidu.com">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="Submit">
    </form>

    <iframe id="myIframe" name="myIframe"
            sandbox="allow-same-origin allow-scripts"
            style="display:none"></iframe>

    <script>
        const myForm = document.querySelector('#myForm');
        const myIframe = document.querySelector('#myIframe');
        myForm.target = myIframe.name;
        myForm.addEventListener('submit', () => {
            myIframe.addEventListener('load', () => {
                alert('提交成功！');
            });
        });
    </script>
</body>
</html>

3. 嵌入响应式页面

在以下示例中，我们将会通过JavaScript实现自适应iframe大小的目标。


<!DOCTYPE html>
<html>
<head>
    <title>Iframe响应式例子</title>
</head>
<body>
    <iframe src="https://www.baidu.com/" frameborder="0"
     scrolling="no" onload="resizeIframe(this)"></iframe>

    <script type="text/javascript">
        function resizeIframe(obj) {//自适应设置

            obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';// 通过子页面的高度
        }
    </script>
</body>
</html>

4. 组合使用

在以下示例中，我们将综合应用iframe的各个部分，包括嵌入其他网站内容、自适应、表单提交功能等。


<!DOCTYPE html>
<html>
<head>
    <title>组合使用iframe例子</title>
</head>
<body>
    <div><h3>菜鸟教程中的Iframe综合应用小例子</h3></div>
    <hr>

    <form id="myForm" method="post" action="https://www.baidu.com">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="Submit">
    </form>

    <iframe id="myIframe" name="myIframe" style="width:100%;height:500px;"
            sandbox="allow-same-origin allow-scripts"
            src="https://www.baidu.com"></iframe>

    <script type="text/javascript">
        const myForm = document.querySelector('#myForm');
        const myIframe = document.querySelector('#myIframe');
        myForm.target = myIframe.name;
        myForm.addEventListener('submit', () => {
            myIframe.addEventListener('load', () => {
                alert('提交成功！');
            });
        });

        function resizeIframe(obj) {
            obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
        }
    </script>
</body>
</html>

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/207150.html