how to get iframe dom in js
how to get iframe dom in js
https://stackoverflow.com/questions/3999101/get-iframes-document-from-javascript-in-main-document
// iframe.contentDocument == iframe.contentWindow.document
document.getElementById('myframe').contentWindow.document;
function GetDoc(x) {
return x.contentDocument || x.contentWindow.document;
}
contentWindow
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow
https://www.dyn-web.com/tutorials/iframes/refs/iframe.php
https://www.dyn-web.com/tutorials/iframes/refs/parent.php
demo
https://codepen.io/webgeeker/pen/KJppBr
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>iframe single testing</title>
</head>
<body>
<section>
<h1>iframe single testing</h1>
<iframe
src ="https://www.sina.com.cn/"
target="_self"
style="border: 1px solid red;"
height="500"
width="600">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
// iframe onload
const getAllIframes = () => {
let iframes = [...document.querySelectorAll(`iframe`)];
console.log(`iframes.length =`, iframes.length);
iframes.forEach(
(iframe, i) => {
if(i < 10) {
console.log(`iframe =`, iframe);
}
// iframe.contentDocument || iframe.contentWindow.document
if (iframe.contentDocument) {
// old IE
console.log(`iframe.contentDocument =`, iframe.contentDocument);
// get all links
}
if (iframe.contentWindow.document) {
// new Chrome
console.log(`iframe.contentWindow.document =`, iframe.contentWindow.document);
// get all links
}
}
);
};
const removeAllIframesBlankLinks = () => {
// iframe & virtualDOM bug
let links = [...document.querySelectorAll(`a`)];
console.log(`links.length =`, links.length);
links.forEach(
(link, i) => {
if(i < 10) {
console.log(`link =`, link);
}
if (link.target) {
console.log(`link.target =`, link.target);
link.target = "_self";
}
}
);
};
setTimeout(() => {
getAllIframes();
}, 10000);
setTimeout(() => {
removeAllIframesBlankLinks();
}, 10000);
</script>
</section>
</body>
</html>
CORS
https://stackoverflow.com/questions/6170925/get-dom-content-of-cross-domain-iframe
libs ???
https://github.com/oyvindkinsey/easyXDM#readme
postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
iframe & CSP
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/csp
https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript
https://html.spec.whatwg.org/multipage/iframe-embed-object.html#dom-iframe-contentwindow
https://w3c.github.io/webappsec-feature-policy/#feature-policy
https://fetch.spec.whatwg.org/#concept-response-csp-list
https://www.w3schools.com/jsref/prop_frame_contentdocument.asp
CORS demo
window.frames[0].document;
https://cdn.xgqfrms.xyz/iframe/iframe-single-testing.html
https://cdn.xgqfrms.xyz/iframe/same-origin-iframe.html
iframe & HTTPS & CORS
https://iframe.xgqfrms.xyz/eapp/index.html#blog.sina.cn
how to get iframe dom in js的更多相关文章
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- 在iframe中获取本iframe DOM引用
window.frameElement 获取本iframe DOM window.frameElement.contentDocument.getElementById('id') 获取这个ifram ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- iframe中的js
iframe之间的js是不能相互访问的,iframe和父窗体之间的js也是不能相互访问的
- jquery操作iframe中的js函数
关键字:jquery操作iframe中的js函数 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content&quo ...
- Layer获取iframe的dom元素及调用iframe页的js方法
1. 父页面点击第一个按钮触发,获取子页面中的body元素,调用子页面中定义的js方法 yes : function(index,layero){ //获取iframe的body元素 var body ...
- [HTML]HTML框架IFrame下利用JS在主页面和子页面间传值
今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料 下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了 D ...
- Google street、Google satellite 、百度地图Iframe切换桥接JS
1.地图切换方法 注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFun ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
随机推荐
- Magic Trackpad 2 on win10 x64
可以使用操作: 触击 触击拖拽 双击 支手滚动:上下,左右 右键配置:左下角,右下角点击实现 可以试用28天,收费 $9.5 官方地址:http://www.trackpadmagic.com/mag ...
- Linux之linux基础命令2
目录相关: 创建目录: mkdir 目录名 递归创建a/b c/d: mkdir -p a/b c/d 递归创建test/a,b,c,d四个目录: mkdir - p test{a,b,c,d} 递归 ...
- 高速下载百度网盘的方法，只需要一个软件【win/mac/linux】
论坛里差不多全部都是用百度云的,但是官方百度云的限速,大家都懂的,下面教大家使用一个软件满速下载,不用油猴 1,软件支持mac,win64/32,linux.Linux只有自己编译使用,我也不会哈哈哈 ...
- 快手hr面
快手hr面 20180918 自我介绍 hr部门介绍 效率工程 主要问题 问我对部门是否有感兴趣? 我要求地点在北京,然后就畅聊口音.老家,学校等 学校的成绩?(研究生.本科) 自己属于哪类学生?(属 ...
- Netty源码分析第2章(NioEventLoop)---->第8节: 执行任务队列
Netty源码分析第二章: NioEventLoop 第八节: 执行任务队列 继续回到NioEventLoop的run()方法: protected void run() { for (;;) ...
- 如何批量删除QQ浏览器指定历史记录和导出指定的历史记录
QQ浏览器的历史记录只有清空历史记录和删除选中项两个功能.有时我不想删除所有的历史记录,只是想删除指定的历史记录保留对自己有用的历史记录,方便自己以后查找.但是删除选中项功能只能一项一项的选择,才能批 ...
- JavaScript设计模式-----模板方法模式
模板方法模式是一种只需要使用继承就可以实现的非常简单点的模式. 模板方法模式有两部分组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现 一些公共方法以及 ...
- Python数据分析工具库-Numpy 数组支持库（一）
1 Numpy数组 在Python中有类似数组功能的数据结构,比如list,但在数据量大时,list的运行速度便不尽如意,Numpy(Numerical Python)提供了真正的数组功能,以及对数据 ...
- js/jquery去掉空格,回车,换行示例代码
Jquery: $("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));// ...
- js中模拟a标签的点击事件
var a = document.createElement('a'); a.target = "_blank"; a.href = "personal"; a ...