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的更多相关文章

  1. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  2. 在iframe中获取本iframe DOM引用

    window.frameElement 获取本iframe DOM window.frameElement.contentDocument.getElementById('id') 获取这个ifram ...

  3. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  4. iframe中的js

    iframe之间的js是不能相互访问的,iframe和父窗体之间的js也是不能相互访问的

  5. jquery操作iframe中的js函数

    关键字:jquery操作iframe中的js函数 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content&quo ...

  6. Layer获取iframe的dom元素及调用iframe页的js方法

    1. 父页面点击第一个按钮触发,获取子页面中的body元素,调用子页面中定义的js方法 yes : function(index,layero){ //获取iframe的body元素 var body ...

  7. [HTML]HTML框架IFrame下利用JS在主页面和子页面间传值

    今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料 下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了 D ...

  8. Google street、Google satellite 、百度地图Iframe切换桥接JS

    1.地图切换方法 注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFun ...

  9. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

随机推荐

  1. cogs1685 【NOI2014】魔法森林 Link-Cut Tree

    LCT练手好题啊. SPFA的做♂FA是把边按照a排序,然后加一条权值为b的边跑SPFA,不断更新答案.很好的做♂FA,但复杂度无♂FA保证. LCT的做♂FA类似,也是把边按照a排序,然后也是加一条 ...

  2. 干货分享：五大最适合学习AI开发的编程语言

    AI(人工智能)为应用开发者开创了一个全新的可能性.通过利用机器学习或深度学习,您可以生成更好的用户配置文件.个性化设置和推荐,或者整合更智能的搜索.语音界面或智能助手,或者以其他数种方式改进您的应用 ...

  3. VB.NET 仿Edge风格的TabControl控件

    原本是想写个Chrome内核的浏览器,但是.net语言下比较好用类库的并不多,尝试过CefSharp.Xilium.CefGlue,都发现很多坑,所以这个项目就烂尾了,现在将还有点用的代码发出来给大家 ...

  4. java中文显示乱码的解决方式

    myeclipse 10 import 源文件后java文件中文乱码问题,*.java文件中的中文不能显示,都是乱码 解决方法(网上找的,已经过验证): 一.将整个project设置编码UTF-8(U ...

  5. 如何在忘记mysql的登录密码时更改mysql登录的密码(window及linux)

    最近一直在边学习边开发java项目,理所当然的就少不了跟数据库打交道了,但是有时候就会脑子一短路,把mysql的登录密码给忘记了,这个时候我们又很急切的需要进到数据库中查看数据,那这个时候要怎么才能改 ...

  6. JavaScript学习要点

    Javascript相关内容 1.序列化--json - stringify() 将对象转换为字符串 - parse() 将字符串转换为对象 list=[11,22,33,44,55]; 结果:(5) ...

  7. AlexNet——ImageNet Classification with Deep Convolutional Neural Networks

    1. 摘要 本文的模型采用了 5 层的卷积,一些层后面还紧跟着最大池化层,和 3 层的全连接,最后是一个 1000 维的 softmax 来进行分类. 为了减少过拟合,在全连接层采取了 dropout ...

  8. MFC常用操作

    目录: 1.文件操作 1.1.获取文件大小 2.路径操作 2.1.创建多级目录 1.文件操作 1.1.获取文件大小 // 获取文件大小 ULONGLONG size = ; // 文件大小 CFile ...

  9. 我眼中的PD（产品狗）

    以下内容可能引起您的不适(前方高能),请先移步科普: 产品经理为什么会存在? 本猿 -> web程序属 -> 前端开发种,从大森林迁徙到了小草原: 小草原物种稀缺,除了 程序猿,很难见到诸 ...

  10. Xcode中的文件类型

    文件类型 Xcode中的文件类型,总共4种类型: 1 普通文件(File) 2 Group(在Xcode中就是黄色的文件夹) 3 Folder(在Xcode中就是蓝色的文件夹) 4 Framework ...