开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >Iframe 标签显示目标网页的指定区域

Iframe 标签显示目标网页的指定区域

作者头像

Savalone

发布于 2020-01-06 03:09:17

发布于 2020-01-06 03:09:17

3K00

代码可运行

举报

文章被收录于专栏：Savalone's BlogSavalone's Blog

运行总次数：0

代码可运行

有些时候我们并不需要显示 iframe 标签属性 src 指定的目标网页的所有内容，往往只需要显示某一特定区域。原理很简单，但是像站长这种野路子出身的可能真不知道，主要用到了 position 的定位 x,y 值

例：

<iframe src="http://app.jszg.edu.cn/portal/cert_validate/index" width="660" height="506" frameborder="0" scrolling="no" style="position: absolute; top: -360px; left: -20;"></iframe>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年06月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

使用iframe实现在pc端预览移动端页面的效果

前段时间需要做一个在PC端预览移动端的功能，由于我是前端不太好，就在网上查找资料，花了半天的时间终于有所收获，在这里把我的实现代码分享给大家。想要在PC端实现模拟手机环境的预览效果，一般有两种方法，一种通过iframe实现，一种通过div实现的，这里我选择了后者。实现的效果如下：

AlbertYang

2020/09/08

5K0

使用iframe实现在pc端预览移动端页面的效果

javascript当中iframe的用法

2.iframe 马克-to-win：frame在frameset中比较死板，iframe在div中可以在绝对的任何位置。例 2.2.1（example1.html) <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <div style="position:absolute;top: 20px; left:20px;"> <iframe src="iframe2.html" id="tag" name="tag" width="250" height="100" scrolling="yes" frameborder="1"> </iframe> </div> 这有一行文本 <div style="position:absolute;top: 20px; left:300px;"> <iframe src="iframe3.html" id="test3" width="450" height="300" scrolling="no" frameborder="1"> </iframe> </div> <div style="position:absolute;top: 300px; left:200px;"> <iframe src="iframe4.html" id="test3" width="450" height="300" scrolling="no" frameborder="0"> </iframe> </div> </body> </html> iframe2.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body style="BACKGROUND-COLOR:red;"> <table width="50" height="20"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>2</td> </tr> <tr> <td>2</td>

马克java社区

2021/01/19

7170

javascript当中iframe的用法

iframe属性与用法

html https 网络安全 java

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

全栈程序员站长

2022/07/22

3.1K0

【Html.js——CSS布局】618 活动（蓝桥杯真题-2325）【合集】

css html class 布局浏览器

Rossy Yan

2025/02/02

510

【Html.js——CSS布局】618 活动（蓝桥杯真题-2325）【合集】

Web组件库 iframe引入各平台视频

iframe web 视频腾讯组件库

1. 引入B站视频 https://www.bilibili.com/video/BV1N3411q7z7?share_source=copy_web 1.1. 效果代码： <iframe src=

郭顺发

2023/07/17

8160

另类SEO分享：利用JS封装iframe躲过搜索引擎的抓取

前言：很多博友不仔细看完内容就直接认为用 iframe 不好之类的云云，而实际上本文就是教你在必须使用 iframe 的时候，该如何躲过搜索引擎的抓取，避免不利于 SEO 的情况！那么，何为“必须要用 iframe 的时候”？我举个简单的例子：一些主题分享网站，很多时候会使用 iframe 框架调用主题作者的网站来做主题演示，这时候就会产生大量的 iframe 框架，那么本文的方法就可以派上用场了！导读：了解一点 seo 的站长，应该都知道爬虫都不喜欢 iframe 或 frame，因为蜘蛛访问一个网址

张戈

2018/03/23

3.1K0

另类SEO分享：利用JS封装iframe躲过搜索引擎的抓取

如何在html嵌入html网页

height iframe title width html

未名编程

2024/10/12

3680

响应式web布局中iframe的自适应

困境在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会

欲休

2018/03/15

2.6K0

响应式web布局中iframe的自适应

扩展graphiclayer实现多城市天气情况的展示

在上一节，实现了点击展示城市天气的效果，在本节，讲述通过扩展graphiclayer实现同时显示多个城市天气的展示。

牛老师讲GIS

2018/10/23

6400

扩展graphiclayer实现多城市天气情况的展示

03-iframe属性src的使用

jsp java https 网络安全 html

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

全栈程序员站长

2022/07/23

2K0

IFRAME属性及详解

缓存 node.js html

标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为 HTML 应用程序(HTA)，以便免除浏览器安全模式。 ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 ACCELERATOR accelerator 设置或获取表明对象是否包含快捷键的字符串。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括 3D 边框。 background-attachment backgroundAttachment 设置或获取背景图像如何附加到文档内的对象中。 background-color backgroundColor 设置或获取对象内容后的颜色。 background-position-x backgroundPositionX 设置或获取 backgroundPosition 属性的 x 坐标。 background-position-y backgroundPositionY 设置或获取 backgroundPosition 属性的 y 坐标。 behavior behavior 设置或获取 DHTML 行为的位置。 border-bottom borderBottom 设置或获取对象下边框的属性。 border-bottom-color borderBottomColor 设置或获取对象下边框的颜色。 border-bottom-style borderBottomStyle 设置或获取对象下边框的样式。 border-bottom-width borderBottomWidth 设置或获取对象下边框的宽度。 border-color borderColor 设置或获取对象的边框颜色。 border-left borderLeft 设置或获取对象左边框的属性。 border-left-color borderLeftColor 设置或获取对象左边框的颜色。 border-left-style borderLeftStyle 设置或获取对象左边框的样式。 border-left-width borderLeftWidth 设置或获取对象左边框的宽度。 border-right borderRight 设置或获取对象右边框的属性。 border-right-color borderRightColor 设置或获取对象右边框的颜色。 border-right-style borderRightStyle 设置或获取对象右边框的样式。 border-right-width borderRightWidth 设置或获取对象右边框的宽度。 border-style borderStyle 设置或获取对象上下左右边框的样式。 border-top borderTop 设置或获取对象上边框的属性。 border-top-color borderTopColor 设置或获取对象上边框的颜色。 border-top-style borderTopStyle 设置或获取对象上边框的样式。 border-top-width borderTopWidth 设置或获取对象上边框的宽度。 border-width borderWidth 设置或获取对象上下左右边框的宽度。 bottom bottom 设置或获取对象相对于文档层次中下个定位对象的底部的位置。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的 frame 或 iframe 的 window 对象。 clear clear 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。 clip clip 设置或获取定位对象的哪个部分可见。 cursor cursor 设置或获取当鼠标指针指向对象时所使用的鼠标指针。 display display 设置或获取对象是否要渲染。 DATAFLD dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DATASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstC

全栈程序员站长

2022/07/23

1.8K0

如何让一个层位于iframe之上.flash之上

该文介绍了如何设置元素的z-index属性以使一个层位于另一个层之上。首先，介绍了z-index属性的含义，然后给出了一些示例代码。

练小习

2017/12/29

7910

解决iframe高度自适应

html https 网络安全

iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。

全栈程序员站长

2022/11/17

2.6K0

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

html java https 缓存网络安全

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自动适应内容的高度

全栈程序员站长

2022/08/01

3.6K0

大学生阅读小说网页设计模板代码小说书籍网页作业成品学校书籍网页制作模板学生简单书籍阅读网站设计成品

javascript html css jquery java

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！一、👨‍🎓网站题目 🏫 校园网页设计、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。二、✍️网站描述 🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局

IT司马青衫

2022/08/13

1.4K0

大学生阅读小说网页设计模板代码小说书籍网页作业成品学校书籍网页制作模板学生简单书籍阅读网站设计成品

vue2.0 + element-ui +iframe在页面中嵌入外部网站

element iframe ui 框架网站

自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

王小婷

2025/05/19

1310

vue2.0 + element-ui +iframe在页面中嵌入外部网站

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

wordpress 网站建设

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

张戈

2018/03/23

2.2K0

iframe属性参数「建议收藏」

<iframe width=420 height=330 name=aa frameborder=0 src=http://www.liuyebo.com></iframe>，然后，网页上的超链接语句应该写为：<a href=URL target=aa >

全栈程序员站长

2022/07/23

3K0

【Go 语言社区】iframe去边框，无边框，使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe> <iframe runat="server" src="you page's url" width="750" height="30" frameborder="no" border="

李海彬

2018/03/19

2.8K0

iframe参数[通俗易懂]

<iframe src=”test.jsp” width=”100″ height=”50″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>

全栈程序员站长

2022/07/18

4.1K0

相关推荐

使用iframe实现在pc端预览移动端页面的效果

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

防止别人 iframe 自己的页面

加入讨论

的问答专区 >

1创始人擅长5个领域

相关课程

一站式学习中心 >

腾讯云向量数据库-RAG七天入门训练营

向量数据库

腾讯云安灯