如何在页面加载后调用js的代码自动复制一段文字

JavaScript011

如何在页面加载后调用js的代码自动复制一段文字,第1张

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方法”的文字链,即可成功弹出提示。

复制,一般都是讲一个元素的value或是html赋值到另一个元素的value或是html。下面是简单代码实现:

html部分:

<input type="button" value="显示div1的内容" id="btn" />

<div id="div1" style="display:none">div1</div>

<div id="div2" style="display:none">div2</div>

<div id="show-box"></div>

js部分

var div1=document.getElementById("div1")

var div2=document.getElementById("div2")

var btn=document.getElementById("btn")

var showBox=document.getElementById("show-box")

//方法一:将div中的值赋值到一个用于显示的框中(showBox)

var flag=true

btn.onclick=function(){

    if(flag){

        showBox.innerHTML=div1.innerHTML

        btn.value="显示div2的内容"

        flag=false

    }else{

        showBox.innerHTML=div2.innerHTML

        btn.value="显示div1的内容"

        flag=true

    }

}

//方法二:用按钮控制div1,div2的显示隐藏

var flag=true

btn.onclick=function(){

    if(flag){

        div1.style.display="block"

        div2.style.display="none"

        btn.value="显示div2的内容"

        flag=false

    }else{

        div2.style.display="block"

        div1.style.display="none"

        btn.value="显示div1的内容"

        flag=true

    }

}

<input type="button" style="border:nonebackground-color:#38fcolor:#fffpadding:2px 6px" onClick="copyUrl2()" value="点击复制" />