JS实现内容复制功能

JavaScript027

JS实现内容复制功能,第1张

复制是一个使用频率特别高的操作,在网页中,一般可以选中要复制的内容,使用快捷键 ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容,我们还可以用JS实现复制,这得益于document的 execCommand('copy') 命令。 实现整个复制功能,需要以下三个步骤: 大部分HTML元素都有innerText和innerHTML两个属性,innerText属性返回文本内容,innerHTML属性返回标签元素。我们可以创建一个函数,用于获取需要返回的内容: 上面的selectText函数接收一个DOM元素,返回DOM元素的innerText属性值。 我们可以通过表单元素的select()方法选中内容,表单元素因为textarea限制少于input,所以推荐使用textarea。我们可以动态创建一个textarea元素,将textarea的value属性值设置为上面的innerText属性值,再执行textarea的select方法选中。 上面实现了选中,下面就可以实现复制功能了。 最后一步就可以用execCommand('copy')实现复制了,它可以复制浏览器中选中的文本,比如说上面被textarea选中的文本,复制之后记得移除textarea。 第二步和第三步可以优化一下,创建一个copy函数,函数参数设置为第一步需要复制的文本,返回值为复制的结果。 完整JS示例如下: 可以将上面的完整JS示例写入一个JS文件,将JS文件引入HTML中,通过JS点击事件来执行复制函数。 效果图:

1、首先建立一个父级页面parent.html,代码如图,一个pop函数方法,一个链接到child.html的iframe标签。

2、再新建一个child.html页面,如图,展示一个id=link的div标签,和link的点击事件,因为是调用父级方法,所以需要用到window.parent.pop()方法。

3、预览页面,可明显看到parent.html里面的iframe框架,指向的就是child子页面。

4、点击页面中“调用父级pop方法”的文字链,会提示错误,这是因为没配置好域名等相关设置。

5、打开iis,右键iframe文件夹——“管理文件夹”——“浏览”;即可打开本地测试地址;(如小伙伴没配置iis,需要先配置iis建立站点)。

6、再次点击“调用父级pop方法”的文字链,即可成功弹出提示。

获得iframe的window对象 存在跨域访问限制

chrome iframeElement contentWindow firefox iframeElement contentWindow ie iframeElement contentWindow

文章Iframes onload and document domain中说“he iframe element object has a property called contentDocument that contains the iframe s document object so you can use the parentWindow property to retrieve the window object ”意思就是一些浏览器可以通过iframeElement contentDocument parentWindow获得iframe的 window对象 但经过测试firefox chrome的element contentDocument对象没有parentWindow属性

(javascript)

复制代码 代码如下: function getIframeWindow(element){ return element contentWindow//return element contentWindow || element contentDocument parentWindow}

获得iframe的document对象 存在跨域访问限制

chrome iframeElement contentDocument firefox iframeElement contentDocument ie element contentWindow document 备注 ie没有iframeElement contentDocument属性

(javascript)

复制代码 代码如下: var getIframeDocument = function(element) { return element contentDocument || element contentWindow document}

iframe中获得父页面的window对象 存在跨域访问限制

父页面 window parent 顶层页面 window top 适用于所有浏览器

获得iframe在父页面中的标签 存在跨域访问限制

window frameElement(类型 HTMLElement) 适用于所有浏览器

iframe的onload事件 非ie浏览器都提供了onload事件 例如下面代码在ie中是不会有弹出框的

(javascript)

复制代码 代码如下: var ifr = document createElement( iframe )ifr src = ifr onload = function() { alert( loaded )}document body appendChild(ifr)

但是ie却又似乎提供了onload事件 下面两种方法都会触发onload

方法一

复制代码 代码如下: <iframe onload="alert( loaded )" src="

方法二 //只有ie才支持为createElement传递这样的参数

复制代码 代码如下: var ifr = document createElement( <iframe onload="alert( loaded )" src=" )document body appendChild(ifr)

由于iframe元素包含于父级页面中 因此以上方法均不存在跨域问题

实际上IE提供了onload事件 但必须使用attachEvent进行绑定

复制代码 代码如下: var ifr = document createElement( iframe )ifr src = if (ifr attachEvent) { ifr attachEvent( onload function(){ alert( loaded )})} else { ifr onload = function() { alert( loaded )}} document body appendChild(ifr)

frames window frames可以取到页面中的帧(iframe frame等) 需要注意的是取到的是window对象 而不是HTMLElement

复制代码 代码如下: lishixinzhi/Article/program/Java/JSP/201311/19939