开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Iframe文档显示基本HTML...getElementById为空

是指在使用iframe标签嵌入网页时，通过getElementById方法无法获取到iframe内部文档中的元素。

Iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。通过使用iframe，可以将其他网页或者文档嵌入到当前页面中的指定位置。

当在iframe中嵌入一个网页时，如果想要通过JavaScript获取到嵌入页面中的元素，通常会使用getElementById方法。该方法通过元素的id属性来获取对应的元素。

然而，当使用getElementById方法时，如果在iframe内部的文档中没有找到对应id的元素，那么该方法将返回null，即getElementById为空。

这种情况可能出现的原因有以下几种：

嵌入的网页中没有定义对应id的元素：在iframe内部的文档中，可能没有定义与所需id匹配的元素。在这种情况下，需要确保嵌入的网页中存在对应id的元素。
跨域访问限制：由于浏览器的同源策略限制，当iframe中的网页与当前页面不属于同一个域时，JavaScript无法直接访问iframe内部的文档。这种情况下，需要通过其他方式来实现跨域通信，如使用postMessage方法进行消息传递。

解决该问题的方法有以下几种：

确保嵌入的网页中存在对应id的元素：在iframe内部的文档中，需要确保定义了与所需id匹配的元素。可以通过查看嵌入的网页源代码或者与网页开发者确认来确定是否存在对应id的元素。
跨域通信：如果嵌入的网页与当前页面不属于同一个域，需要使用postMessage方法进行跨域通信。通过在父页面和iframe内部的文档中分别编写JavaScript代码，实现消息的发送和接收，从而实现跨域通信。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS之浏览器对象BOM

DOM Window 代表窗体 DOM History 历史记录 DOM Location 浏览器导航重点：window、history、location ，最重要的是window对象 1.window对象 Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象 window.frames 返回窗口中所有命名的框架 parent是父窗口（如果窗口是顶级窗口，

09

作为window对象属性的元素多窗口和窗体

如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性，则window对象会赋予一个属性，其名字为id属性的值，其值指向该元素

05

iframe标签属性说明详解[通俗易懂]

Iframe 标签详解<Iframe src=”example.htm” width=”300″ heitht=”100″></IFRAME> example.htm 是被嵌入的页面，标签 <IFRAME> 还有一些可用的参数设置如下： marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=”20″，单位是 pix，下同。 marginheight:网页中内容在表格顶部预留的高度； hspace:网页右上角的的横坐标； vspace:网页右上角的纵坐标； frameborder:是否显示边缘；填”1″表示”是”，填”0″表示”否” scrolling:是否出现滚动条；填”1″表示”是”，填”0″表示”否” 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下： name：内嵌帧名称 width：内嵌帧宽度(可用像素值或百分比) height：内嵌帧高度(可用像素值或百分比) frameborder：内嵌帧边框 marginwidth：帧内文本的左右页边距 marginheight：帧内文本的上下页边距 scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示) src：内嵌入文件的地址 style：内嵌文档的样式(如设置文档背景等) allowtransparency：是否允许透明明白了以上属性后，我们可用以下代码实现，在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中让iframe自动适应内容的高度

02

前端温习(二)： Javascriput 核心对象 Document 对象

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

02

javascript基础-3

window.resizeBy(XX[px]，YY[px]);——窗口尺寸变化的单位为：±XX，±YY （单位/px）； window.resizeTo(XX[px]，YY[px]);——窗口尺寸变换为：XX,YY（单位/px）； window.scrollBy(XX[px]，YY[px]);——屏幕滚动的单位为：±XX，±YY （单位/px）； window.scrollToo(XX[px]，YY[px]);———屏幕滚动到数据位置：XX,YY（单位/px）； object.onscroll()；onscroll事件：元素滚动时执行..； document.Element.scrollTop||document.body.scrollTop;回顶；

02

DOM 节点的克隆和导入

在使用 JS 操作 DOM 节点的时候，我们常常会用到克隆（或导入）节点的操作，那到底有哪些方法可以实现节点克隆（或导入）的效果呢？

00

PHP下ajax跨域的解决方案之window.name实例分析

本文实例讲述了PHP下ajax跨域的解决方案之window.name。分享给大家供大家参考，具体如下：

02

iframe属性与用法

虽然他们说的是真的，但是iframe的强大功能是不容忽视的，而且现在不乏公司正在使用它。

01

PHP使用反向Ajax技术实现在线客服系统详解

本文实例讲述了PHP使用反向Ajax技术实现在线客服系统。分享给大家供大家参考，具体如下：

04

如何检测本页中的iframe是否“加载”完成

这其实是上一篇"iframe框架取值兼容ie/firefox/chrome的写法"的扩展应用: 应用场景：iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外，还没找到更有效的办法)，但是有时候我们不知道这个iframe页面是否执行完毕，有没有办法判断iframe里的页面是否load完成了呢？ iframe1.html: <html> <head> <title>框架内页</title> </head> <body>

05

iframe的高度自适应_div自适应高度

大家好，又见面了，我是你们的朋友全栈君。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

04

图片和视频防盗链简单介绍

一. 防盗链原理 http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。设置突破防盗链方法 1. 使用apache文件FileMatch限制，在httpd.conf中增加 ( 其实也可以将把下面的语句存成一个.htaccess文件)，并放到你的网站的根目录（就是www/html目录），这样子别人就没有办法盗连你的东东了~~ SetEnvIfNoCase Referer "^http://kuaisho

07

前端入门学习--HTML

写在前面。前端知识真的还是比较有用的。一直要把前端的学习提上日程，因为各种事情各种拖延，写爬虫的时候也是捎带学习前端的东西，还是需要系统的了解下。 All from W3school.

04

iframe标签（页面嵌套）

上面两张图是两个不同的页面但是它们的基本框架都是一样，每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的，改变的是中间的内容。

01

Web---监听用户名注册技术-myAJax-隐藏帧

本来本篇博客在上个月就已经发表的，但由于我的疏忽，导致文章被彻底编辑不见，特来补上。

02

Hexo -21- iframe 增加全屏显示按钮

在 Hexo 网页中经常会用到 iframe 模块插入想要显示的内容，由于主题限制，内容只能在博客内容区显示。本文记录为iframe 增加全屏按钮的方法。方案思路确定 iframe 块的 id 使用 JavaScript 控制该 id 的全屏行为设置按钮控制开关解决方案 js 代码 <script> /** * 进入全屏 * @param element */ function requestFullScreen(element) { v

01

iframe自适应高度原

同时总结下经常用的高度 contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。 contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。 document.body.clientWidth 可见区域内容的宽度（不包含边框，如果水平有滚动条，不显示全部内容的宽度） document.body.clientHeight 全部内容的高度（如果垂直有滚动条，也显示全部内容的高度） document.body.offsetWidth 可见区域内容的宽度（含边框，如果水平有滚动条，不显示全部内容的宽度） document.body.offsetHeight 全部内容的高度（如果垂直有滚动条，也显示全部内容的高度） document.body.scrollWidth 内容的宽度（含边框,如果有滚动则是包含整个页面的内容的宽度，即拖动滚动条后看到的所有内容） document.body.scrollHeight 全部内容的高度

02

iframe 自适应高度的多种实现方式

需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

03

HTML DOC

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

01

postMessage使用

参考自文档：https://www.runoob.com/js/met-win-postmessage.html

02

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID，反之也行！

jquery取得iframe中元素的几种方法在iframe子页面获取父页面元素代码如下: $('#objId', parent.document); // 搞定... 在父页面获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) $(document.getElementById('iframeId').contentWindow.document.body).html() 显示iframe中body

09

HTML5的Message

Message API最大的优势是跨域发送消息。关于Message更多的信息请参考：

01

document.getElementById的理解

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159579.html原文链接：https://javaforall.cn

01

postMessage详解

该方法是HTML5引入的API，可以通过异步方式实现跨源通信，多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制，只要正确使用，这种方法很安全。

02

【JS】JavaScript 基础入门

theme: healer-readable highlight: a11y-dark

03

前端面试题-每日练习(1)

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

02

HTML5-嵌入内容

img元素允许我们在HTML文档里嵌入图像。图像在HTML标记处理完毕后才加载！！

06

HTML学习笔记——心动不如行动

----------------------------------------------------------------------

02

Web Components 上手指南

现在的前端开发基本离不开 React、Vue 这两个框架的支撑，而这两个框架下面又衍生出了许多的自定义组件库：

03

PHP基于session.upload_progress 实现文件上传进度显示功能详解

本文实例讲述了PHP基于session.upload_progress 实现文件上传进度显示功能。分享给大家供大家参考，具体如下：

01

contextIsolation | Electron 安全

大家好，今天和大家讨论的是 Electron 的另一个大的安全措施 —— contextIsolation 即上下文隔离

01

JS 跨域问题常见的五种解决方式

要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的.

00

HTML 5.2中有些什么新变化？

不到一个月前，HTML 5.2成为W3C官方的推荐标准（REC）。当一个规范进入REC阶段时，就意味着它已经得到了W3C成员和负责人的正式认可，并且W3C正式把它推荐推荐给用户进行部署，并且由网页开发人员实施。

01

前端：跨域

同源策略（same-origin policy）是一个重要的安全策略。它用于限制从一个源（origin）加载的文档或脚本，如何与另一个源（origin）的资源进行交互。

02

ajax全套

对于WEB应用程序：用户浏览器发送请求，服务器接收并处理请求，然后返回结果，往往返回就是字符串（HTML），浏览器将字符串（HTML）渲染并显示浏览器上。

02

防盗链referer详解和解决办法「建议收藏」

在一开始,我打算将其他网站的图片放在自己的网站（http://localhost…）上显示.

01

tinyxml动态库生成和使用「建议收藏」

从http://ncu.dl.sourceforge.net/sourceforge/tinyxml/tinyxml_2_4_0.tar.gz下载tinyxml，可以根据自己的需要，选择不同的版本。

02

html中嵌入iframe进行父子页面参数传递[通俗易懂]

1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（[参数列表]）

05

什么是跨域以及几种简单解决方案

同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢？

01

JavaScript中的沙箱机制探秘[二]:iFrame沙箱实现方案详解

在上一篇文中，我们接触了JavaScript中的sandbox的概念，并且就现阶段的一些实现思路做了总结，包括YUI的闭包、iframe的sandbox以及Nodejs的VM和child_process模块，在文中我们也知道了各自实现的局限性。而对于前端来说，让前端的第三方js代码能够从本质上产生隔离，并且让后端参与部分安全管控是最理想的状态。在这些方案中，在引擎层面制造隔离的iframe方案显然是最简单可行的。

01

附实例！实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS，实现iframe父窗体与子窗体间的通信，传递数据信息。

PC端无需跳转直接调用哔哩哔哩自适应视频

1、获取B站相应视频嵌入代码： <iframe src="//player.bilibili.com/player.html?aid=545983251&bvid=BV1Mq4y177qZ& cid=

02

contentWindow属性是指指定的frame或者iframe所在的window对象

在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则

02

什么是跨域？如何解决跨域问题？

什么是跨域？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域域名：　主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js 　子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js 　域名和域名ip http://www.baidu.com/index.html –>http://180.149.132.47/test.js 端口：　http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/test.js 协议：　http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js 备注：　1、端口和协议的不同，只能通过后台来解决　2、localhost和127.0.0.1虽然都指向本机，但也属于跨域

01

JS常用代码块

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

03

传说中图片防盗链的爱恨情仇

我们先来了解了解防盗链的原理，在 http 协议中，如果从一个页面跳到另一个页面，header字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。

04

为iFrame添加动态载入效果，提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载，并且未加载完成之前还会强行占据一大片空白区域，体验很不友好！昨天在制作展示导航 WordPress 插件时，把这个问题也一并处理了，其中涉及到了这个 i

04

Merit价值和成果管理系统——1侧栏与iframe

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/52268963

02

cefsharp教程_常见的数据分析方法有哪些

本节汇总一些关于cefsharp的使用方法，包括c#调用HTML页面中的js，也可以是HTML中的按钮调用c#的方法。汇总后，方便以后使用和查看。

04

文件上传的最佳前端体验做法

网页开发者们想了很多办法，试图提升文件上传的功能和操作体验，在各种Javascript库的基础上，开发了五花八门的插件。可是，由于不同浏览器之间的差异，缺乏统一接口，这些插件要么用起来很麻烦，要么不能普遍适用。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭