iframe元素操作

本文所有内容均未测试,只是看着参考写出来的笔记,不保证内容的准确性,如果发现了错误请指出谢谢。

在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。

在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里,然后他一脸黑线,现在我终于知道是为什么了~

接下来进入正文

访问iframe元素的关键就在于要知道连接到iframe的方法,看下面

[PS:不同方法在不同浏览器里可能不可用]


第一种方法

这种方法目测只可以用在IE里

var iframe=document.frames["iframe的name属性"];
/*然后就可以用*/
iframe.document./*来进行和正常元素访问一样的元素操作*/

示例:

var iframe=document.frames["iframe"];
iframe.document.getElementByid("lalala").innerHtml="这个元素的id是lalala";

第二种方法:contentWindow

var iframe=document.getElementById('iframe的id').contentWindow;
/*然后用*/
iframe.document./*进行元素访问*/

这种方法得到的是iframe里面的window层级[到下面说明]

示例:

var iframe=document.getElementById('iframe').contentWindow;
iframe.document.write("这样可以在当前页用js显示页面内容啦");

这种方法得到的是iframe里面的document层级[到下面说明]

第三种方法:contentDocument

var iframe=document.getElementById('iframe的id').contentDocument;
/*然后用*/
iframe.document./*进行元素访问*/

示例:

var iframe=document.getElementById('iframe').contentDocument;
iframe.document.title="目测改了title也看不到";

由此我还更新了佳佳实验室里的TIY By 佳佳(还是一堆bug。。)

然后我还写出了这个通用方法

var iframe;
	try {
		iframe = document.getElementById('displayarea').contentWindow.document;
	} catch(e) {
		try {
			iframe = document.getElementById('displayarea').contentDocument;
		} catch(e) {
			try {
				document.frames["displayarea"];
			} catch(e) {
				alert("根本就没有办法获取iframe的dom吖><");
			}
		}
	}

这里的iframe变量就是document级的了,可以直接使用,比如

iframe.getElementById("lalala");


本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。