深入理解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/zh-tw/n/207150.html