在不使用三大框架的情况下,iframe的使用可以做到在页面中直接引入别的页面作为当前页面的一部分,但是在iframe的使用过程中存在一些相互之间的操作

例如在iframe中获取主页面的元素,使用主页面的js中定义的方法

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

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

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

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

 

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

parent.method parent.value

 

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

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

$("#objid", parent.document)

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

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

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

indow.parent.document.getElementByIdx_x("元素id");

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

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

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

window.parent.func();
 

iframe中操作主体页面的元素,方法的更多相关文章

  1. Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  2. 在iframe中获取父页面的元素

    a.html <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  3. layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ ...

  4. js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  5. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  6. 在其他系统Iframe中显示SharePoint 页面

    前段时间在做一个项目,要求将SharePoint 的 OWA(Office Web Apps)中的文档显示页面嵌入到另外一个OA系统中,提供给用户可以通过浏览器查看SharePoint文档的能力. 嵌 ...

  7. iframe中涉及父子页面跨域问题

    什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...

  8. PHP中常见的页面跳转方法

    转载自冠威博客 [ http://www.guanwei.org/ ]本文链接地址:http://www.guanwei.org/post/PHPnotes/04/php-redirect-metho ...

  9. 用 DOM 获取页面的元素方法集合

    document.getElementById('id名')            // 获取页面设置指定 id 的元素 document.getElementsByTagName('标签名')    ...

随机推荐

  1. bloginfo()用法小结|wordpress函数

    bloginfo()显示关于您的wordpress站点的信息,主要是从您的用户配置文件和WordPress管理屏幕的一般设置中收集的信息.它可以在模板文件的任何地方使用.这总是将结果打印到浏览器.如果 ...

  2. C++stringstream使用

    链接 建议在使用是直接使用stringstream,不需要再去分输入用istringstream,输出用ostringstream.

  3. Module build failed: Error: Cannot find module 'node-sass'

    安装npm 遇到 Module build failed: Error: Cannot find module 'node-sass' 这次通过重装 npm 完成 先卸载npm npm uninsta ...

  4. zabbix-钉钉报警媒介

    (1)第三方报警平台(钉钉) 先指定要发送的群,在群里创建机器人 添加机器人 可以参考   “说明文档” 创建测试文档 vim   ceshi.sh curl 'https://oapi.dingta ...

  5. PATA1082Read Number in Chinese

    有几点需要注意的地方一是将right转化为与left在在同一节 while (left + 4 <= right) { right -= 4;//每次将right移动4位,直到left与righ ...

  6. 关于.ipynb文件

    一.简介: .ipynb文件即为Jupyter Notebook,是一个交互式笔记本,支持运行 40 多种编程语言. Jupyter Notebook 的本质是一个 Web 应用程序,便于创建和共享文 ...

  7. 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...

  8. 20165214 2018-2019-2 《网络对抗技术》Exp7 网络欺诈防范 Week10

    <网络对抗技术>Exp7 网络欺诈防范 Week10 一.实验目标与内容 1.实践目标 理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法 2.实践内容 (1)简单应用SET工 ...

  9. thinkphp5用了哪些设计模式

    一.设计模式简介 首先我们来认识一下什么是设计模式:设计模式是一套被反复使用.容易被他人理解的.可靠的代码设计经验的总结.设计模式不是Java的专利,我们用面向对象的方法在PHP里也能很好的使用23种 ...

  10. sqlException 使用relace 替换单引号

    我们从前端输入数据的时候,可能会输入一些 单引号 ,的字符 导致直接进行执行sql 语句保存的时候出现错误 如: 输入的有 单引号 保存按钮小代码 <asp:Button ID="bt ...