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

虚拟 iframe 应用演示

<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 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查看控制台的信息

花飞飞 发表于 2024-10-23 22:22

看了几眼这个烧脑。。。支持一下先溜了。。

花飞飞 发表于 2024-10-23 22:23

{:4_173:}点完F12直接晕了。。。古得小白。

马黑黑 发表于 2024-10-23 23:08

花飞飞 发表于 2024-10-23 22:23
点完F12直接晕了。。。古得小白。

信息放在控制台里

马黑黑 发表于 2024-10-23 23:09

花飞飞 发表于 2024-10-23 22:22
看了几眼这个烧脑。。。支持一下先溜了。。

88

红影 发表于 2024-10-24 10:02

运行一下，在控制台就能看到虚拟 iframe里的内容了吧。
虽然知道了这个还不清楚能派什么用途{:4_173:}

马黑黑 发表于 2024-10-24 11:55

红影 发表于 2024-10-24 10:02
运行一下，在控制台就能看到虚拟 iframe里的内容了吧。
虽然知道了这个还不清楚能派什么用途

三楼不是讲了吗

花飞飞 发表于 2024-10-24 18:37

马黑黑 发表于 2024-10-23 23:08
信息放在控制台里

控制台好象作用很大，有朋友找视频地址跑到这里来找的。。。
我学了一下，当时也能找到隐起来的视频地址，但不理解，隔阵子不用就忘了。。。{:4_173:}

花飞飞 发表于 2024-10-24 18:38

马黑黑 发表于 2024-10-23 23:09
88

晒了一下，脑壳嗡嗡的，是真得白一会了{:4_170:}

马黑黑 发表于 2024-10-24 21:48

花飞飞 发表于 2024-10-24 18:38
晒了一下，脑壳嗡嗡的，是真得白一会了

白白

红影 发表于 2024-10-24 22:04

马黑黑 发表于 2024-10-24 11:55
三楼不是讲了吗

看了啊，不过没有具体的例子，也没怎么看明白，只知道有跨域等作用{:4_173:}

马黑黑 发表于 2024-10-24 22:46

红影 发表于 2024-10-24 22:04
看了啊，不过没有具体的例子，也没怎么看明白，只知道有跨域等作用

具体例子就在一楼

红影 发表于 2024-10-24 23:08

马黑黑 发表于 2024-10-24 22:46
具体例子就在一楼

我输入了几个文字，然后F12里看到的就是这几个字{:4_173:}

马黑黑 发表于 2024-10-24 23:29

红影 发表于 2024-10-24 23:08
我输入了几个文字，然后F12里看到的就是这几个字

你输入的，按F12能看到的，就是实现目的了：能动态获取虚拟 iframe 的内容

红影 发表于 2024-10-24 23:46

马黑黑 发表于 2024-10-24 23:29
你输入的，按F12能看到的，就是实现目的了：能动态获取虚拟 iframe 的内容

原来是这样{:4_204:}

南无月 发表于 2024-11-1 21:21

I'm an iframe.
页: [1]
查看完整版本: 虚拟 iframe 应用演示