iframe的document操作

导语:

在我写网页代填插件的时候,有遇到拿不到input元素的时候,这时候我去看元素布局,发现有些网站登录那一块是用iframe标签写的,这时候我需要取到的那就是iframe标签下input元素

1.获取页面上的所有iframe标签遍历获取每一个iframe

  • 获取所有的iframe标签
let iframes = document.getElementsByTagName("iframe");
  • 遍历获取单个iframe
for (let i = 0; i < iframes.length; i++) {
       let iframeId = iframes[i].id;
       let currentIframe = document.getElementById(iframeId);
}

取完整iframe元素必须用getElementById的方法获取。

2.获取iframe下document元素

let currentDoc = currentIframe.contentDocument || currentIframe.contentWindow.document

这里主要拿到iframe的document操作元素,有些浏览器可以直接contentDocument获取document操作元素,有些需要通过contentWindow.document获取

3.获取iframe中输入框

let inputs = currentDoc.getElementsByTagName("input");

这样就能获取iframe所有的输入框标签。

*注意:当iframe跨域的时候,就无法获取iframe的document操作。

链接:https://www.jianshu.com/p/9809cd8188dd

原文地址:https://www.cnblogs.com/lcspring/p/10850365.html

时间: 2024-10-10 19:34:24

iframe的document操作的相关文章

JavaScript对iframe的DOM操作

在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在Firefox下却不可以使用,Firefox下使用的是符合W3C标准的 document.getElementById(ID).contentDocument 方法,今天我在写实例的时候,通过IE8进行测试,IE8也是使用的符合W3C标准的 document.getElementById(ID).co

基本的window.document操作及实例

基本的window.document操作及实例 找元素 1.根据id找 var d1 = document.getElementById("d1"); alert(d1); 2.根据class找 var d2 = document.getElementsByClassName("d"); alert(d2[1]); 3.根据标签名找 var d3 = document.getElementsByTagName("div"); alert(d3[0

iframe父子页面操作-比较好用的两个方法-window.parent/oframe.contentWindow.document

发现比较好用的iframe父子页面操作方法,记录一下 1.父页面 test.html <iframe id="iframe1" src="iframe.html"></iframe> 获取iframe    var oframe = document.getElementById("main") 获取子页面  var child =  oframe.contentWindow.document 获取子页面元素      v

iframe子页面操作父页面的方法

<script> //关闭iframe $('.if-close').click(function(){ $(".hide-slide",parent.document).fadeOut(); $(parent.document.body).removeClass("html-body-overflow");//显示滚动条 }); </script> 子页面的 .if-close 操作父页面的 .hide-slide 原文地址:https:/

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

document操作

1.windows对象操作 事件两个参数sender:代表事件源,即谁触发的事件e:代表事件数据load(sender,e)事件是一个特殊的委托(代理)2.document对象操作找元素:1.根据id找.2.class3.根据标签名找4.根据name找操作元素:操作内容操作属性操作样式 操作内容:非表单元素:1.获取文本 d1.innerText2.设置文本 d1.innerText="hello"3.获取html代码4.设置html代码表单元素1.赋值2.获取值 操作属性1.添加属性

document操作例题4

六.进度条 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ marg

简单的document操作

1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" : "tcl", "desc" : "4k gaoqing", "price" : 3000, "tags" : ["zhineng","chaobao"]}ES会自动