虚拟 iframe 应用演示

马黑黑 · 发表于 2024-10-23 21:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-10-23 21:57

代码：

<style>
#maindiv { margin: 20px auto; width: 600px; height: 400px; position: relative; }
.ifrbox { position: absolute; width: 100%; height: 380px; }
.btnwrap { position: absolute; width: 100%; height: 20px; bottom: 0; text-align: center; }
</style>
<div id="maindiv">
<div id="ifrpa" class="ifrbox"></div>
<div class="btnwrap">
<button id="getContent" type="button" value="get">获取虚拟iframe的内容</button>
</div>
</div>
<script>
//创建虚拟iframe元素并设置必要属性、为其建立一个textarea标签
var iframe = document.createElement('iframe');
iframe.scrolling = 'no';
iframe.scrolling = 'no';
iframe.width = '100%';
iframe.height = '100%';
iframe.style.cssText += 'border: 0; outline: 0;';
iframe.srcdoc = '<textarea style="width: 98%; height: 340px; padding: 6px">I\'m an iframe.</textarea>';
ifrpa.appendChild(iframe);
//获取iframe内textarea的值
getContent.onclick = () => {
var tbox = iframe.contentWindow.document.body.querySelector('textarea');
if(tbox) {
console.log(tbox.value);
tbox.focus();
}else{
console.log('iframe里不存在 textarea 标签');
}
};
</script>

复制代码

马黑黑 · 发表于 2024-10-23 22:04

一楼的效果里，文本框是 iframe 框架带进来的，但这个 iframe 是虚拟的，并没有从外部引入 src 所指向的目标文档。

虚拟的 iframe 好处多多，例如，解决了跨域问题，即使不开启web服务，也可以对 iframe 进行随意操作。

而 iframe 很多时候是 web 开发必须的，例如做一个文本编辑器，使用 iframe 可以保留双焦点，又例如同步运行或演示元素有 id 的特定内容，由于 iframe 与引入者是隔离的，克隆到 iframe 或从 iframe 克隆过来的内容不会受到 id 同名的影响，能正常运行和演示。

一楼的演示，可以修改文本框的内容，然后点击底下的按钮，再按F12查看控制台的信息