iframe页面加载完成为什么还是获取不到里面的dom? 因为Iframe是跨域,跨域的情况下是无法获取到iframe里面的DOM的,即使iframe加载完成,也无法获取到里面的DOM。 有什么方法获取的到呢? 1.使用 window.postMessage 方法,将信息从iframe传递到父页面,从而能够获取到iframe里面的DOM。 2.使用document.domain,将iframe和父页面设置为同一个域,从而能够获取到iframe里面的DOM。 3.使用跨域资源共享(CORS),从而能够跨域获取iframe里面的DOM。 例如:1.window.postMessage方法: 父页面: // 监听来自子页面的消息 window.addEventListener('message', (event) => { console.log(event.data); }, false); // 向子页面发送消息 window.frames[0].postMessage('Hello, child page', '*'); 子页面: // 监听来自父页面的消息 window.addEventListener('message', (event) => { console.log(event.data); }, false); // 向父页面发送消息 window.parent.postMessage('Hello, parent page', '*'); 2.document.domain方法: 父页面和子页面设置相同的document.domain即可,然后即可以使用任意js方法从父页面访问子页面的DOM元素。  父页面: document.domain = 'example.com'; 子页面: document.domain = 'example.com'; // 父页面访问子页面的DOM var element = window.frames[0].document.getElementById('example');  3.跨域资源共享(CORS): 使用CORS可以跨域访问资源,可以让父页面访问iframe里面的DOM。 父页面: <iframe src="http://example.com/iframe.html" allow="cross-origin"></iframe> 子页面: <script> document.addEventListener('DOMContentLoaded', () => { // 父页面访问子页面的DOM var element = document.getElementById('example'); }); </script>

iframe页面加载完成为什么还是获取不到里面的dom的更多相关文章

  1. react 如何处理页面加载时无法将获取缓存信息存入全局变量中

    最近在做一个权限功能时,发现在读取用户公司ID进行列表查询 时,无法钭读取到缓存中的数据存入页面全局变量中进行加载查询 将问题代码整理出来 将信息存入缓存: let menuList = Helper ...

  2. SpringBoot的配置文件加载顺序以及如何获取jar包里的资源路径

    一.读取配置文件的四种方式 这四种配置文件放置方式的读取优先级依次递减,具体可以查看官方文档. 1.1jar包同级目录下的config文件夹里的配置文件 其实我以前就见过这种方式了,只是不知道怎么做的 ...

  3. jq页面加载问题

    Window.onload=function(){ //页面加载,不能同时编写多个,最后面的会覆盖前面的 }   $(document).ready(function(){ //页面加载,能同时编写多 ...

  4. 页面加载完毕执行多个JS函数

    通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...

  5. Java Selenium (十二) 操作弹出窗口 & 智能等待页面加载完成 & 处理 Iframe 中的元素

    一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然 ...

  6. Exploit Kit——hacker入侵web,某iframe中将加载RIG EK登录页面,最终下载并执行Monero矿工

    RIG Exploit Kit使用PROPagate注入技术传播Monero Miner from:https://www.4hou.com/technology/12310.html 导语:Fire ...

  7. JavaScript在A页面判断B页面加载完毕(iframe load)

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  8. ExtJs非Iframe框架加载页面实现

    在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...

  9. 页面加载与iframe加载函数

    <head> <script> $(document).ready(function(){ alert("a");   var wait = documen ...

  10. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

随机推荐

  1. Matchmaker Server 像素流送配对服务器

  2. PyMySQL删除

    title: PyMySQL删除 author: 杨晓东 permalink: PyMySQL删除 date: 2021-10-02 11:27:04 categories: - 投篮 tags: - ...

  3. CF1786E题解

    容易为本题的弱化版CF1786C想出一个贪心: #include<bits/stdc++.h> using namespace std; #define int long long int ...

  4. 有一个按钮,点击后就发起一次请求,我现在要限制每2S只能发起一次请求,怎么办?

    1.防抖/节流方案2.临时变量记录最后发起请求的时间,点击时对比时间差的方案

  5. FMC145-四路16位125Msps AD FMC子卡模块 模拟信号 中频信号采集 信号发出

    FMC145-四路16位125Msps AD FMC子卡模块 一.概述 该板卡可实现4路16bit 125Msps AD 功能,是xilinx开发板设计的标准板卡.FMC连接器是一种高速多pin的互连 ...

  6. 043_关于Salesforce集中权限的解释

    1.创建Object的时候,一定要选中Deploy,避免在All Tabs 中找不到 2.在Profile里,选择 Standart tab Setting.Custom tab setting,有三 ...

  7. OSS管理文件(Node.js)

    let OSS = require('ali-oss'); let config = { region: 'oss-cn-hangzhou', //你的Region 注意 这个只要 空间名 不要 ht ...

  8. Vue常用组件,,,持续更新中

    1.vue-lazyload :图片懒加载 2.vue-virtual-scroll-list 和 vue-virtual-scroller: 优化无限列表的场景 3.vue-table-with-t ...

  9. Leetcode习题集-链表

    这里记录一些我刷题的思路方便之后进行复习重温,同时也方便进行添加 P141-环形链表 class Solution { public: bool hasCycle(ListNode *head) { ...

  10. 【LeetCode - 1055】形成字符串的最短路径

    1.题目描述 代码: #include <iostream> #include <string> using namespace std; const int MAX_LETT ...