<iframe>框架标签的使用
同源下
1、iframe属性设置参考:https://blog.csdn.net/xiyiyindie/article/details/53415158
2、父子页面之间元素相互操作:https://www.cnblogs.com/loveamyforever/p/6222604.html
3、子页面的js,对父页面的操作:https://www.jb51.net/article/89931.htm(DOM操作) 和 https://blog.csdn.net/u012374381/article/details/79578311(方法属性操作)
a、子页面操作父页面的DOM:(不同源的话,浏览器 报错 且 没有执行操作)
var parentDiv =window.parent.document.getElementById('parentH');
parentDiv.style.color = 'red';
b、子页面操作父页面的属性和方法(必须是全局下的属性方法):(父页面的方法属性挂在 window.parent 下,跨域访问无效)
// 父页面的方法:
function sayhello() {
alert('Hello World!');
}
var value = 'value'
// 子页面中调用
//在iframe中调用父页面中定义的变量
alert(parent.value); // 正常执行
//在iframe中调用父页面中定义的方法
parent.sayhello(); // 正常执行
4、父页面的js,对子页面的操作:https://www.jb51.net/article/89931.htm(DOM操作) 和 https://blog.csdn.net/qq_25391785/article/details/88101363(方法属性操作)
a、父页面操作子页面的DOM:(不同源的话,浏览器 报错 且 没有执行操作) (DOM的操作,要注意加载完才能获取到,onload事件后)
window.onload = function(){
var iframePage = document.getElementById('eval').contentWindow;
var childDiv = iframePage.document.getElementById('evalText');
childDiv.style.backgroundColor = '#ccc';
}
b、父页面操作子页面的属性和方法(必须是全局下的属性方法):(跨域访问无效)
// 子页面的方法属性
function sayhello() {
alert('Hello World!');
}
var value = 'value'
// 父页面中调用子页面的方法
var iframePage = document.getElementById('eval').contentWindow;
iframePage.sayhello()
总结:子窗口获取父窗口的window:父子窗口的获取是否同源都是可以获取的
var parentWindow = window.parent;
父窗口获取子窗口的window:
var childWindow = document.getElementById('eval').contentWindow // "eval" 是 ifram的id属性
不同源
1、iframe与父窗口交互(不同源不能拿到彼此的dom):https://blog.csdn.net/weixin_43837268/article/details/91347640
2、iframe 中 跨域的父子窗口,js 是无法直接进行彼此 DOM和js方法属性的操作的。(两者之间的数据传递需要使用其他的方法)
3、子页面 传递信息给 父页面:(不同源下,父子之间是可以彼此操作url的)
方案1、片段识别符:片段标识符(fragment identifier)指的是,URL的#
号后面的部分,比如http://example.com/x.html#fragment
的#fragment
。如果只是改变片段标识符,页面不会重新刷新
// 子窗口
parent.location.href = originURL + "#" + data; // 子窗口 改变父窗口url的hash值,触发父窗口的 onhashchange 事件
// 父窗口
window.onhashchange = function () { // 父窗口监听自己的窗口的rul的hash值变化。(url的改变应该是不会触发的,没有试过)
var message = window.location.hash;
console.log(message);
}
方案2、window.name: 浏览器窗口有window.name
属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。
使用说明:这个属性值,只要窗口没有关闭,不管页面怎么跳转(无论是否同源),这个值一直存在,所有页面都可以获取这个值。但是,iframe内的窗口和父窗口,是两个窗口。window.name无法在父子窗口传递,要借助一个中间页面。
具体的 参考链接 (不推荐这种方法,影响性能,用户体验也不好)
方案3、window.postMessage:跨文档通信 API (HTML5为了解决这个问题而引入的API)。基于这个API,参考链接 上写了一个跨文档读写LocalStorage的方法。
// 子窗口
window.parent.postMessage('Nice to see you', 'http://localhost:3000'); // 子窗口发送信息出去
// 父窗口
window.addEventListener('message', function(e) { // 监听其它窗口发送过来的信息
console.log('oooo',e.data);
},false);
4、父页面 传递信息给 子页面:(和上面的原理是一样的,正式反着操作就可以了,下面的就写下方案1和方案3)
方案1、片段识别符:片段标识符(fragment identifier)指的是,URL的#
号后面的部分,比如http://example.com/x.html#fragment
的#fragment
。如果只是改变片段标识符,页面不会重新刷新
// 父窗口
document.getElementById('myIFrame').src = originURL + "#" + data; // 父窗口 改变子窗口的url的hash值,触发子窗口的 onhashchange 事件
// 子窗口
window.onhashchange = function () { // 子窗口监听自己的窗口的rul的hash值变化。(url的改变应该是不会触发的,没有试过)
var message = window.location.hash;
console.log(message);
}
方案3、window.postMessage:跨文档通信 API (HTML5为了解决这个问题而引入的API)
// 父窗口
window.onload = function(){
document.getElementById('eval').contentWindow.postMessage('Nice to see you', 'http://192.30.255.104:3000'); // 跨文档发送信息
}
// 子页面
window.addEventListener('message', function(e) { // 子页面监听发送过来的信息事件
console.log('oooo',e.data);
},false);
<iframe>框架标签的使用的更多相关文章
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- HTML框架标签
与HTML框架有关的标签主要有三种: <frameset>框架结构标签 <frame>框架标签 <iframe>内联框架标签 一. 先来说第一种框架结构标签 < ...
- form表单以及内嵌框架标签
今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...
- Window 对象 HTML框架标签(Frame)
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外 ...
- 028、HTML 标签2超链接,框架标签
内容:超链接,框架标签############################################################## <!-- 超链接 --> <a h ...
- 使用iframe框架时,实现子页面内跳转到整个页面,而不是在子页面内跳转
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...
- [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签
一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...
- ASP.NET 页面禁止被 iframe 框架引用
两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...
- javaweb之框架标签(day1 框架标签的使用)
框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...
随机推荐
- php 后台转发和重定向的区别及kohana框架当前url加参数方式
1.重定向是浏览器行为,浏览器地址有变化:转发是后台服务器完成, url地址不变化. 2.kohana获取URL 当前url是http://soyoung.kohana.com/blog/add?id ...
- 一些idea
二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...
- 96、搬家到csdn
大家好: 今天开始会将所有的博客搬家到CSDN,以后请参考CSDN上的博客:http://blog.csdn.net/u012416045 谢谢 维真
- 用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 Jinja 中常用的过滤器 default float int len ...
- 人工智能-动物识别专家系统算法Python + Pyqt 实现
一.基础知识库 有毛发 哺乳动物 - 有奶 哺乳动物 - 有羽毛 鸟 - 会飞 会下蛋 鸟 - 吃肉 食肉动物 - 有犬齿 有爪 眼盯前方 食肉动物 - 哺乳动物 有蹄 有蹄类动物 - 哺乳动物 反刍 ...
- shell 字符串匹配变量(只取数字或者取固定字符串)
var1=abc3559 #想要获得3559 操作: var1_key=`echo $var1 | tr -cd "[0-9]"` https://www.cnblogs.co ...
- Config JAVA evironment for LoadRunner
1. Install jdk 2. Set system variables eg. JAVA_HOME = C:\Program Files (x86)\Java\jdk1.6.0_43 class ...
- 12.Jmeter 快速入门教程 -- 监控被测资源
写在前面的话, 作者认为jmeter的监控被测服务器资源只是基本可用, 还好习惯了linux的各种命令和工具,所以也基本不用担心什么了.但是有了图形化的监控, 也方便给领导出报告. 怎么说也是不错的. ...
- kafka安装指导
本篇博客主要讲解在虚拟机安装之后,从如下五个方面进行讲解kafka的安装过程. (1)如何配置虚拟机网络 (2)如何安装JDK (3)如何安装zookeeper (4)如何安装kafka (5)kaf ...
- CF1228F
写了一个特别麻烦的做法 首先一共有三种情况:1.删掉一个叶子,2.删掉根的一个儿子,3.其他的节点 第一种情况会有两个度数为2的节点,第二种情况没有度数为2的节点,第三种情况会有一个度数为4的节点 然 ...