父页面调用子页面的方法

其实一句话就可以调用子页面的方法了,何必整得那么纠结是吧,感谢java大神:

var dsjg1=document.getElementById("div-dsjg").contentWindow.checkEmpty();

我的子页面有一个方法:

子页面js:

function checkEmpty(){

  alert("我是儿子!");

} 

子页面body内容省略。

父页面:

    <iframe id="div-dsjg" src="zi.html"></iframe>

    <input type="button" onclik="apprval();"/>

父页面的js:

function apprval(){

  var dsjg1=document.getElementById("div-dsjg").contentWindow.checkEmpty();

  alert("我是父亲!");

}

结果弹出为:

我是儿子!

我是父亲!

需要注意的是:如果你用的是iframe,则在加载子页面时,子页面里所有的东西都被加载,包括子页面的head、title、body等内容。

如果你用的纯粹的div打开,则只加载子页面的body内容,这时候,你就可以在父页面直接调用子页面的方法了!

可是有一天,你发现这个页面不是自己写的,但我实在是看不出到底是div打开的呢,还是iframe,你可以用360、谷歌浏览器调试一下,你就能看见到底用的是什么了。

时间: 2024-10-08 09:04:38

父页面调用子页面的方法的相关文章

js父页面调用子页面数据时,子页面通过父页面传过来的参数回调父页面具体方法

今天写代码时发现同一页面多个地方需要调用同一个子页面,如果多个方法调用时,同一子页面回调父页面方法则会出问题,所以查了下资料,让这个功能通用化,根据具体方法回调具体父页面方法,顺便总结一下,希望以后可以有用,或许可以帮助需要帮助的人 这里使用 eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 父页面调用子页面的路径(子页面的路径)如下 http://localhoust:8080/oss-portlet/html/util/area

angular 中父组件调用子组件的方法

angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 中使用 #var 方式标记 子组件 <div style="border: 1px solid red"> <p>子组件:</p>> <ap

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面获取子页面的元素 //jquery方式 $("#iframeId").contents().find("#child1"); //js方式 window.frames["iframName"].document.getElementById(&quo

Appcan学习笔记(1)——父页面调用子页面的方法

1.单个子页面 index.html 为父页面,里面有div为:<div id="content" class="ub-f1"> </div> 此div承载子页面 index_content.html 当触发父页面中的某一事件时调用子页面中的某一方法,代码如下 appcan.frame.evaluateScript("","content","RequestData('"+par+&

easyui dialog iframe模式,dialog 父级页面调用子页面(iframe)的方法

var content = '<iframe id="iframe1" name="iframeuuid" src="' + url + '" width="100%" height="98%" frameborder="0" scrolling="no"></iframe>';var div = document.createElement(

layer弹窗确定按钮:父页面调用子页面

实例: var index=layer.open({         type:2,         title: '选择节点任务',         closeBtn: 1,         area:['300px','400px'],         shade:[0.5, '#000000'],         maxmin:false,         btn: ['确定', '关闭'],         yes: function(index, layero){          

layer父界面调用子弹窗的方法和获取子弹窗的元素值总结

1 layer.open({ 2 type: 2 3 ,title: false //不显示标题栏 4 ,closeBtn: false 5 ,area: ['460px', '45%'] 6 ,shade: 0.5 7 ,id: 'LAY_layuipro·' //设定一个id,防止重复弹出 8 ,btn: ['确定','取消'] 9 ,btn1: function(index, layero){ 10 11 var body = layer.getChildFrame('body', ind

Vue父组件调用子组件的方法

vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/componen

父组件调用子组件的方法

我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 父组件 子组件 原文地址:https://www.cnblogs.com/xianhao/p/10475314.html