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