<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 ...
随机推荐
- px4::init_once();和px4::init(argc, argv, "px4");函数学习
px4::init_once(); void init_once() { _shell_task_id = pthread_self(); ...
- POJ 1273 Drainage Ditches (网络流Dinic模板)
Description Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover ...
- Android 模糊搜索rawquery bind or column index out of range: handle 0x2fb180 报错
做模糊搜索时,出现了 bind or column index out of range: handle 0x2fb180 报错 public Cursor getTitle(String word ...
- Android Studio遇到了“No USB devices or running emulators detected”
我这里遇到的情况是adb interface 错误:未安装,在这个网站: http://adbdriver.com/downloads/ 下载了Automated installation(Unive ...
- js中文首字母数组排序
js中文首字母数组排序 数组的排序js算法: var Pinyin = (function() { var Pinyin = function(ops) { this.initialize(ops); ...
- 31. Git与Github
Github介绍 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库 ...
- 前端面试题,js预处理部分小结,函数声明提升和变量声明提升
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/25/%e5%89%8d%e7%ab%af%e9%9d%a2%e8%af%95%e9% ...
- 【Spring】每个程序员都使用Spring(四)——Aop+自定义注解做日志拦截
一.前言 上一篇博客向大家介绍了Aop的概念,对切面=切点+通知 .连接点.织入.目标对象.代理(jdk动态代理和CGLIB代理)有所了解了.理论很强,实用就在这篇博客介绍. 这篇博客中,小编向大家介 ...
- Java面试宝典(5)算法
二.算法与编程 1.编写一个程序,将a.txt文件中的单词与b.txt文件中的单词交替合并到c.txt文件中,a.txt文件中的单词用回车符分隔,b.txt文件中用回车或空格进行分隔. 答: pack ...
- 关于JDK,tomcat,eclipse的配置
1.下载安装JDK 在自定义安装路径时,jdk和之后的jre文件夹是属于平行结构,我的安装路径为:D:\jdk\jdk1.6.0_43和D:\jdk\jre6 然后是对环境变量的配置, 计算机→属性→ ...