如何在 Iframe 讀取或寫入字串

Posted on Edited on In Word count in article: 93 Reading time ≈ 1 mins.

建立 HTML

首先在 HTML 建立一個 iframe

1
<iframe id="test"></iframe>

操作 iframe

用 Javascript 搜尋 iframe 的DOM物件

1
let iframe = document.getElementById('test').contentDocument;

字串寫入 iframe

1
2
3
4
5
iframe.open();

iframe.write('<a>test</a>');

iframe.close();

取得 iframe 字串

1
iframe.body.innerText

URL.createObjectURL 寫入 iframe

1
2
3
4
5
6
7
8
9
10
const blobx = new Blob(
    ['<base href="[URL輸入]">' + data],
    {
        type: 'text/html',
    },
)

const urlObject = URL.createObjectURL(blobx)

document.getElementById('test').setAttribute('src', urlObject)

📜 參考資料

  1. MDN Document write