父页面操作嵌套iframe子页面的HTML标签元素

一个页面A.html使用iframe嵌套一个页面B.html,在A页面写js操作B页面HTML元素,首先要获取到B页面document对象,才能对嵌套页面进行操作

请看一个实例,在A页面写js操作B页面div的内容:

A.html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    </head>
    <body >
        <iframe name="iframe1" src="B.html"></iframe>
    </body>
</html>

<script>

        window.onload=()=>{

                $(window.frames["iframe1"].document).on("click","#btn",function(){  //window.frames["iframe1"].document获的iframe标签嵌套页面document对象

                    $(this).html("1123");
                })
        }

</script>

B页面代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>

    </head>
    <body id="body">
        <div id="btn" >测试操作</div>
    </body>
</html>

当点击 “测试操作” 时就这个文字就被修改成“1123”

时间: 2024-10-24 01:18:41

父页面操作嵌套iframe子页面的HTML标签元素的相关文章

父页面操作iframe子页面的安全漏洞及跨域限制问题

一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域情况下,就会有限制,无法相互操作. [解决办法] 1.主域不同 没招 2.主域相同,子域不同 以父(a.baidu.com)子(b.baidu.com)为例: 这俩页面相互操作,要是想解决跨域限制,必须设置一个共同的主域,即document.domain="baidu.com" 二.禁止父

jQuery操作iframe子页中元素代码实例

jQuery操作iframe子页中元素代码实例:本章节介绍一下如何在父页面中操作iframe子页面中的元素,希望能够给需要的朋友带来一定的帮助.一.父页面代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <

在父页面和其iframe之间函数回调 父页面回调iframe里写的函数

// @shaoyang  父页面 window['mengBanLogin']={ mengBanArr : new Array(), mengBanLoginSuccess : function(){ console.log('mengbanzhixing'); if(mengBanLogin.mengBanArr.length > 0){ for(var i = mengBanLogin.mengBanArr.length-1; i >= 0; i--){ mengBanLogin.me

解决父页面加载iframe时,src链接中参数值过大导致加载失败的问题

有时候我们在使用iframe时,喜欢这么写 <iframe src="*******.do?param=****" id="leftFrame" name="leftFrame" frameborder="0"></iframe> 或者是使用js加载src: var params = "?pk_id="+pk_id; var frameLeftSrc = "<%=pa

如何在父页面内触发iframe的元素

父页面的iframe <iframe src="{{ url_for('room_info.person_open_record', resiId =resiId) }}" style="width: 100%;" id="face_record"></iframe> iframe页面的点击的class <img src="{{ i.imgUrl }}" class="table_img

父页面刷新 保持iframe页面url不变

思路:点击父页面时写cookies-->刷新时从cookies中奖内容读取出来. 本文转自:http://blog.163.com/[email protected]/blog/static/114637885201282415580/ <body onbeforeunload="check()"> <iframe id='fjob' name='fjob' style='width:757px;margin-top:10px; height:960px;pad

WinForm页面之间(父页面传递参数给子页面)传递参数

方法一通过构造函数: 父页面(frmMain)点击btnQuery按钮进入子页面(frmListInfo),将数据库名(pdtDB)传递给子页面 父页面代码: private void btnQuery_Click(object sender, EventArgs e) { string pdtDB = FISTools.TAttributeCollection.ProductInfo["DatabaseName"].ToString();//数据库名 this.TopMost = f

web应用页面关闭子页面局部刷新父页面(layer生成子页面)

主页面:main.html   main.js子页面:page.html   page.js 当子页面关闭时需要局部刷新主页面时,可以现在main.html定义一个隐藏的<input type="hidden" id="refreshBtn" onclick="freshPage()"/><!-- 用于子窗口刷新当前页 -->在main.js中添加:    /**      * 刷新当前页面      */    func

提交后刷新本页面与移除本页面的JS写法

@section script { <script src="/res/js/webuploader.nolog.js" type="text/javascript"></script> <link href="/res/css/webuploader.css" rel="stylesheet" type="text/css" /> <script> var