开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

PureJS iframe加载按钮

PureJS是指纯粹的JavaScript，即不依赖于任何框架或库的纯JavaScript编程。iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。

在前端开发中，使用PureJS可以实现各种功能，包括动态加载页面内容。而iframe则可以用于在页面中嵌入其他网页或者加载外部资源。

对于PureJS iframe加载按钮，可以理解为使用纯JavaScript实现一个按钮，点击该按钮后，通过iframe加载指定的页面或资源。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>PureJS iframe加载按钮</title>
</head>
<body>
  <button onclick="loadIframe()">加载页面</button>
  <iframe id="myIframe" src="" style="display: none;"></iframe>

  <script>
    function loadIframe() {
      var iframe = document.getElementById("myIframe");
      iframe.src = "https://example.com"; // 替换为要加载的页面或资源的URL
      iframe.style.display = "block";
    }
  </script>
</body>
</html>

上述代码中，通过点击按钮触发loadIframe()函数，该函数获取id为"myIframe"的iframe元素，并将其src属性设置为要加载的页面或资源的URL。然后将iframe的display属性设置为"block"，使其显示在页面中。

这样，当用户点击按钮时，页面中的iframe就会加载指定的页面或资源。

应用场景：

在单页应用中，通过点击按钮加载其他页面内容，实现页面切换效果。
在需要加载外部资源的情况下，通过点击按钮加载外部资源，如广告、地图等。

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

腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobile
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云音视频处理：https://cloud.tencent.com/product/mps

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

有帮助

没帮助

相关·内容

高效处理报表，掌握原生JS打印和导出报表为PDF的顺畅技巧！

在日常工作中，报表打印和导出为PDF是经常要处理的任务之一。除了方便我们将信息传达给同事和客户外，还可以让工作看起来更加专业、漂亮和规范，从而赢得领导和客户的信任和支持。作为一名工作者，掌握高效的报表处理技巧对提高工作效率至关重要。其中，原生JS打印和导出报表为PDF技巧是一种非常实用、高效且普遍使用的方式。使用原生JS技巧，可以轻松完成报表处理的任务，避免使用繁琐的第三方库和软件，从而节省时间和金钱。掌握原生JS打印和导出报表为PDF技巧并不需要很高的前端开发技能，只需一些JS基础和DOM操作基础。本文将向您介绍如何使用原生JS技巧打印和导出报表为PDF，并帮助解决在处理报表时可能遇到的问题和困难。

03

clickjacking攻击讲解

clickjacking攻击又称作点击劫持攻击。是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。

01

客服弹窗中使用layer库自定义展示的标题 - 网站/网页在线客服源码教程

我在实现客服系统的过程中，使用layer实现右下角弹窗效果，现在需要自定义layer弹窗的标题和增加自定义按钮

03

Hijack攻击揭秘

概述 Clickjacking是最近新兴的针对WEB前端的攻击手段。它通常使用一个ifream覆盖掉当前页面，欺骗用户点击iframe中的恶意内容。 Likejacking通常是针对社交网站的一种攻击手法，攻击者会欺骗用户去点击一个伪造的图标或按钮。如今攻击者已经研究出了大量的方法，来把官方的按钮模仿的惟妙惟肖。 Clickjacking技术首先是由Jeremiah Grossman 和 Robert Hanson在2008年提出的，而如今这种依附于JS的攻

09

php layer弹出层更改背景,详解Layer弹出层样式[通俗易懂]

前言：学习layer弹出框，之前项目是用bootstrap模态框，后来改用layer弹出框，在文章的后面，我会分享项目的一些代码(我自己写的)。

02

layui框架——弹出层layer[通俗易懂]

Array：例如title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意CSS样式

01

layer弹出层详解

前言：学习layer弹出框，之前项目是用bootstrap模态框，后来改用layer弹出框，在文章的后面，我会分享项目的一些代码(我自己写的)。

02

对抗蠕虫 —— 如何让按钮不被 JS 自动点击

作者： EtherDream www.cnblogs.com/index-html/p/anti_xss_worm.html 前言 XSS 自动点按钮有什么危害？在社交网络里，很多操作都是通过点击按钮发起的，例如发表留言。假如留言系统有 XSS，用户中招后除了基本攻击外，还能进行传播 —— XSS 自动填入留言内容，并模拟点击发表按钮，于是就能发布带有恶意代码的留言。好友看了中招后，又传播给他们的好友。。。从而形成蠕虫扩散。那么有没有一种机制，让「发表留言」必须通过用户的「真实点击」按钮才能完成，而无

06

Selenium2+python自动化24-js处理富文本

前言上一篇Selenium2+python自动化23-富文本（自动发帖）解决了富文本上iframe问题，其实没什么特别之处，主要是iframe的切换，本篇讲解通过js的方法处理富文本上ifr

05

php生成静态页面并实现预览功能

这篇文章主要是记录一下php生成静态页面的大致步骤，关于页面静态化，大家想必都听说过，但是真正用的时候反而不是很多。有些页面考虑到访问量比较大，页面结构又不常改动的，比如新闻公告等，可以考虑做成静态页面放在服务器上，这样第一是能抗住大流量的访问，第二也是更加安全一些，打开速度上有保证。

02

【5分钟玩转Lighthouse】爬取JavaScript动态渲染页面

这些日子写过不少爬虫，想说些自己对于爬虫的理解，与本文无关，仅想学爬取JavaScript页面的同学可跳过。

页面弹出层组件layer的用法

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

02

PHP+iframe模拟Ajax上传文件功能示例

本文实例讲述了PHP+iframe模拟Ajax上传文件功能。分享给大家供大家参考，具体如下：

06

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

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

05

测试开发进阶(十一)

HTML HTML 超文本标记语言，网页制作的编程语言结构 <!DOCTYPE html> <html lang="en"> <head> <meta charse

03

Hplus框架动态添加选项卡功能(扩展)

hplus框架确实是后端开发人员的福音，但是有很多功能没有实现，我根据网上大神的做法，实现了动态添加选项卡来打开新页面的功能。

03

postMessage实现跨域通信

web通信（洋名：web messaging）是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。

02

CSS劫持攻击

CSS劫持是一种并不很受重视的劫持方式，但是其也有一定的危害，且由于其并不一定需要依赖JavaScript，这使得此种攻击方式更容易实现。

03

动态监听DOM元素高度变化

1、背景考虑这样一种情况，产品同学希望达到以下功能：在我们的网页中有一个固定区域，这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串。他需要在内容不超过一个最大高度的时候完全显示所有内容，超过最大内容后仅展示最大高度范围内的内容，超出部分隐藏，并通过一个按钮 “展示更多” 来给用户展示更多的选择。在这看似简单的需求当中，其实涉及到了一个难点，那就是怎样动态的监听到内容区域的高度变化？因为在这里面会含有图片资源，他们在渲染的时候会发起网络请求，等待图片加载完成后触发浏览器重排，该区域的高度

03

iframe出现双层滚动条解决方案

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。

02

油猴脚本从编写到检测

油猴脚本是在沙盒里执行用户脚本，不会对网页注入script元素，它通过沙盒向网页中传递信息以达到控制dom的操作。所以如果要对脚本进行检测，没有像上面代码这样子向页面中植入iframe的话，通过去检测dom和window是无法检测出使用油猴脚本的。

01

跳转与导航 | Electron 安全

导航我们都知道，高德地图对吧，我们搜索一个地点，它告诉我们如何到达。对于网站来说，导航是帮助用户到达用户想去的地方(网址)

01

制作三维实景应用一般需要的工具有哪些？

说到做一个三维实景应用，尤其是开发工程师，对自己使用的各种工具肯定要了如指掌才行，大家用的各种工具也各不相同，接下来我们来了解各种三维实景制作工具撒~

01

开发一个在线 Web 代码编辑器，如何？今天来教你！

最近看了掘金刚上线的在线代码编辑器 “码上掘金”，突然想是不是自己也可以写一个在线代码编辑器。

03

【实战】快来和我一起开发一个在线 Web 代码编辑器

其实在线代码编辑器很早就存在了，例如： CodePen，CodeSanbox，JSFiddle 等等都是大家耳熟能详的。这些编辑器给开发者提供了这样的使用场景：当没有机会使用代码编辑器应用程序时，或者当你想使用计算机甚至手机快速尝试 Web 上的某些内容时，在线 Web 代码编辑器就会进行我们的视野。

02

Puppeteer已经取代PhantomJs

记得前几年，我们通常会用PhantomJs做一下自动化测试，或者为了SEO优化，会用它对SPA页面进行预渲染，现在有更好的Puppeteer来代替它的工作了，性能更好，使用起来也更加方便，Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。

01

Web Security 之 Clickjacking

在本节中，我们将解释什么是 clickjacking 点击劫持，并描述常见的点击劫持攻击示例，以及讨论如何防御这些攻击。

01

django 1.8 官方文档翻译： 8-3 点击劫持保护

点击劫持中间件和装饰器提供了简捷易用的，对点击劫持的保护。这种攻击在恶意站点诱导用户点击另一个站点的被覆盖元素时出现，另一个站点已经加载到了隐藏的frame或iframe中。

02

【微前端】：Why Not Iframe

为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。

01

layui弹出框php,layui弹出层怎么使用

layui弹出层的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通过“function show(){var a = layer.open({…});}”方式使用laery.open弹出层即可。

03

Layui 弹出框

layui.use('layer', function(){ var layer = layui.layer;

03

BWAPP之旅_腾旅通app

前期准备 BWAPP下载 BWAPP玩法参考这个下载文件 bWAPP直接下载安装包，解压后，到虚拟机里直接打开文件夹，就可以看到vmx文件，点开后，就打开啦，在物理机或者虚拟机里输入： http://[ip]/bWAPP/login.php ip从bee-box的终端里ifconfig得到

02

customElements 实战之 Lite-embed

Lite-embed 的灵感来源于 paulirish 大神的 lite-youtube-embed 项目：

02

详解使用postMessage解决iframe跨域通信问题

这周碰到一个让人头疼的需求：要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了，但问题来了，我和第三方web项目是有交互的，这就违反同源策略了，处理跨域问题是最让人头疼的事之一。

02

[财务][数据化分析][帆软]报表设计-分页预览

分页预览即普通预览模式，FineReport 的默认预览方式，一般在只需要查看报表数据用于分析的时候使用。

02

Selenium系列（七） - 切换iframe

https://www.cnblogs.com/poloyy/category/1680176.html

02

爬虫入门指南(4): 使用Selenium和API爬取动态网页的最佳方法

随着互联网的发展，许多网站开始采用动态网页来呈现内容。与传统的静态网页不同，动态网页使用JavaScript等脚本技术来实现内容的动态加载和更新。这给网页爬取带来了一定的挑战，因为传统的爬虫工具往往只能获取静态网页的内容。本文将介绍如何使用Selenium和API来实现动态网页的爬取

01

真正解决iframe高度自适应问题

拿到这个对象，就可以根据正常网页的方法拿到嵌入（子）网页的文档高度，然后把值附给父页面的iframe的height。

03

Selenium2+python自动化23-富文本（自动发帖）

前言富文本编辑框是做web自动化最常见的场景，有很多小伙伴遇到了不知道无从下手，本篇以博客园的编辑器为例，解决如何定位富文本，输入文本内容一、加载配置 1.打开博客园写随笔，首先

08

多种方式在Vue中嵌入Grafana面板

昨天想了下开发监控模块的思路，有了大致的实现方法，今天都尝试了下，遇到一些问题,记录下：

03

打造属于自己的 HTML/CSS/JavaScript 实时编辑器

目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。

01

Python 自动化，Helium 凭什么取代 Selenium？

Helium 是一款 Web 端自动化开源框架，全称是：Selenium-Python-Helium，从名字上就可以看出，Helium 似乎和 Selenium 息息相关

01

前端开发必读！7个HTML属性助你提升用户体验

HTML是一种强大的语言，用于创建网页。虽然大多数开发人员熟悉常用的HTML属性，但还有一些较少人知的属性可以提供额外的功能并增强用户体验。在本文中，我们将探讨7个这样的HTML属性，你可能还不知道。

03

自动化收邮件

需求一：对知乎所有评论进行可视化及知识图谱建立，利用机器学习基神经网络训练知识图谱，进一步的增强用户的联系，扩充实体关联，这个就比较难了，还在进行时，哈哈~~

01

我在公司项目上用了微前端，差点被开除

故事的开头从微前端的qiankun去年开始火的时候，我就注意到了，我们公司的Saas系统是可以用这个去解决UI、体验上的一些问题，以及让技术栈平滑过渡迁移，但是奈何时机不够成熟今年抓住了时机，感觉是时候推进微前端了，加上公司内部的星舟平台（Devops平台）也开始推广，我开始寻思改造这个事改造不为了炫技，仅仅为了提升开发、用户体验！当你需要微前端的时候，再用它我在公司内部做了一个技术分享我的微前端改造是利用k8s + qiankun + ingress(path)的配置，达到快速部署的目的，完全无

01

用Selenium来爬取数据？真挺简单的！

于是Selenium就应运而生了，它可以算的上是自动化测试框架中的佼佼者，因为它解决了大多数用来爬取页面的模块的一个永远的痛，那就是Ajax异步加载。今天将给大家详解如何用Selenium爬取数据，并最后附上一个真实的案例。

02

从0开始构建一个Oauth2Server服务 <15> 安全问题

针对 OAuth 服务器的一种潜在Attack是网络钓鱼Attack。这是Attack者创建一个看起来与服务授权页面相同的网页的地方，该页面通常包含用户名和密码字段。然后，Accacker可以通过各种手段诱骗用户访问该页面。除非用户可以检查浏览器的地址栏，否则该页面可能看起来与真正的授权页面完全相同，并且用户可以输入他们的用户名和密码。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭