优秀的编程知识分享平台

网站首页 > 技术文章 正文

利用JQuery操作iframe父页面/子页面元素和方法汇总

nanyue 2025-01-04 22:12:20 技术文章 8 ℃

前言

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录，这个使用纯JS也可以实现。下面话不多说了，来一起看看详细的介绍吧。

第一、在iframe中查找父页面元素的方法：

$('#id', window.parent.document)

第二、在父页面中获取iframe中的元素方法：

$(this).contents().find("#id")

第三、在iframe中调用父页面中定义的方法和变量：

parent.method parent.value

JQUERY、JS调用IFRAME父窗口与子窗口元素的方法

1.jquery 在iframe子页面获取父页面元素代码如下:

$("#id", parent.document)

2. jquery在父页面 获取iframe子页面的元素 代码如下:

$("#id",document.frames('iframename').document)

3.js 在iframe子页面获取父页面元素代码如下:

window.parent.document.getElementByIdx_x("id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("id");

5.子类iframe内调用父类函数：

window.parent.func();

jquery_iframe父子级页面事件使用

1、index.html

<body topmargin='0' leftmargin='0' style="background:#ccc">　　　　//这里的属性只是为了全屏下边无间隙
　　index.html
    <iframe src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;"></iframe>　　　　//这里的样式的为了跳转之后移动端input输入完成之后下边无间隙
</body>

<script>
/*父级本页面事件*/
    function oIndexFn(){
            alert("父级页面index.html事件调用成功");
        }
/*调用子页面事件*/
$(document).click(function(){
　　alert("您点击的是父页面[index]")
    $("#indexMain")[0].contentWindow.oMainFn();    //iframe的id
})
</script>

2、main.html

<body style="background:#f0f0f0">
    main.html
</body>

<script>
/*子级本页面事件*/
    function oMainFn(){
            alert("子页面main.html事件调用成功");
        }
/*调用父页面事件*/
$(document).click(function(){
　　alert("您点击的是子页面！[main]")
    parent.window.oIndexFn();       //调用父级页面事件
})
</script>

Tags：

猜你喜欢

最近发表
标签列表