跨域 iframe 请绕道,下文是针对非跨域 iframe 的问题排除

1、iframe 取不到值的问题的原因

  1. 父页面未加载完成

  2. iframe 未加载完成

  3. 语法使用错误

  4. 跨域(此处不参与讨论)

2、iframe 的基本操作

1. 等待 iframe 加载

// JavaScript方法
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){ // IE
});
} else {
iframe.onload = function(){ // 非IE
};
} // jQuery方法
$('#iframe_id').load(function() {
// 加载完成后逻辑
});

2. 对 iframe 内元素的基本操作

// js方式1
var iframe = document.getElementById('iframe');
// js方式2
var iframe = window.frames["iframe"]; // js执行iframe内函数 方式1
iframe.contentWindow.iframeMethod(fn);
// js执行iframe内函数 方式2
window.frames["iframe"].window.fn(); // jQuery 寻找iframe元素 方式1
$("#iframe").contents().find("#el");
// jQuery 寻找iframe元素 方式2
$(window.frames["iframe"].document).find("#el");

3. iframe 访问父属性

// iframe内访问父页面 函数/变量
window.fn();
window.testKey = 123;

3、示例代码

// JS方式
window.onload = function() {
// 等待iframe加载完成
var iframe = document.getElementById('iframe');
if (iframe.attachEvent){
iframe.attachEvent("onload", function() { // IE
fn();
});
} else {
iframe.onload = function() { // 非IE
fn();
};
} function fn() {
// 主体逻辑
iframe.contentWindow.document.getElementById('id');
}
}; // jQuery方式
$(function() {
// 等待iframe加载完成
$('#iframe').load(function() {
// 主体逻辑
$(this).contents().find('#id');
});
});

最新文章

  1. B2B多商铺初期权限数据库设计
  2. 分享十二个有用的jQuery代码
  3. 随机sample文件Python程序
  4. 极客DIY:打造属于自己的无线移动渗透测试箱
  5. 破解 Rith's CrackMe #1(对比IDA查看动态分析中的MFC函数名)
  6. android 自动化压力测试-monkey 2 获取程序包名
  7. hdu 2665 划分树
  8. Ext.Net学习笔记03:Ext.Net MessageBus用法
  9. 如何让自己的Android程序永不被系统kill
  10. 遗传算法Matlab源程序
  11. UWP 应用通知Notifications
  12. 自己开发的 vue 滑动按钮组件 vue-better-slider
  13. SQL CTE递归
  14. win7 x64 +vs2015 + cmake3.10.3编译opencv-3.4.1+opencv_contrib-3.4.1源码,并进行配置
  15. js--延时消失的菜单--(笔记)
  16. TCP套接字端口复用SO_REUSEADDR
  17. Windows CMD常用命令大全 运行命令
  18. 基于 Raphael 的 Web UI 设计 - 初稿
  19. [Done]java.sql.SQLException: Connection is read-only. Queries leading to data modification are not allowed
  20. C#/JAVA 程序员转GO/GOLANG程序员笔记大全(DAY 06)

热门文章

  1. 【linux】 第1回 linux运维基础
  2. 7.RabbitMQ系列之topic主题交换器
  3. Hyperf使用ElasticSearch记录
  4. Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
  5. 二十三、Pod的service介绍
  6. cameralink base 接口双通道任意图像数据源模拟
  7. spalsh安装及简单使用
  8. Android ViewHolder
  9. pagehelper使用有误导致sql多了一个limit
  10. RabbitMq简单模式