一个iframe怎样浮动在另一个大的iframe上面

IFrame布局技巧

最新推荐文章于 2024-12-20 11:13:52 发布

转载最新推荐文章于 2024-12-20 11:13:52 发布 · 3.6k 阅读

文章标签：

#html5 #iframe #浮动

html5 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用HTML中iframe元素实现特殊布局的方法：通过将两个iframe设置为同级，并将其中一个置于div内，再对该div应用浮动样式，以此实现特定的布局效果。

<iframe src='zhidao.baidu.com/question/537594685.html' width=100% height=500></iframe>
<div style='position:absolute;top:50px;left:50px;'>
<span style="white-space:pre">	</span><iframe src='iduc.com'></iframe>
</div>

1、首先两个iframe要同级

2、把其中一个的iframe套在div里面

3、把div浮动。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

alex8046

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

一个健壮且可扩展的 CSS 架构所需的 8 个简单规则

Lee的博客

05-19

1万+

主要目标但更具体地说，怎样才能被称为健壮且可扩展呢？面向组件 - 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件。如果你正在使用一个合理的框架，JavaScript 方面就将原生支持（组件化）。举个例子，React 就鼓励高度组件化和分割。我们希望有一个 CSS 架构去匹配。沙箱化（Sandboxed） - 如果一个组件的样式会对其他组件产生不必要以及意想不到的影响，那么将 UI ...

跨iframe显示内容

生活不止眼前的苟且

12-13

791

公司后台管理系统是用frameset frame布局的如下：现在需求是在top页面里面加一个按钮，但在right页面显示，一开始觉得应该很容易，但费了九牛二虎之力，都没能实现（可能是本人js能力有限），看了网上其他人的意见，有了一些思路：要想直接去跨frame域基本是不可能的，可以将父页面转换成div iframe结构，子页面再通过jquery对父页面中的div进行样式修改，传数据等，问题完美解

参与评论您还未登录，请先登录后发表或查看评论

javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

03-18

javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

css div层跨越iframe框架，显示在iframe上层，即鼠标悬停div层显示在iframe上面

liyichuanZhengzhou的博客

12-20

306

将 position: absolute 改为 position: fixed 即可。

巧用iframe做浮层

weixin_33701564的博客

05-15

352

巧用iframe做浮层 iframe的诟病太多了，还好标准没有废弃它，其实还是有点用的。在开发产品的时候，我们不得不舍弃一些东西来换取效率。我们的需求是，在某些特定的场景下在现有的页面做一个弹窗，这是常有的运营手段，虽然我觉得是一种粗鲁的运营，但需求还是得做啊。原有的平台页面：新增的运营活动页面：合成的效果图：看到最后这个图不就...

div显示在iframe上面

u013365404的专栏

06-05

4515

直接在div上加position:fixed

python切换前端的iframe页面_python+selenium 切换iframe

weixin_33812391的博客

01-29

1210

转载自http://www.cnblogs.com/yoyoketang/p/6128619.html前言有很多小伙伴在拿163作为登录案例的时候，发现不管怎么定位都无法定位到，到底是什么鬼呢，本篇详细介绍iframe相关的切换以http://mail.163.com/登录页面10为案例，详细介绍switch_to_frame使用方法.一、frame和iframe区别Frame与Iframe两者可...

【Selenium】Selenium自动化进阶find_elements技巧和iframe技巧

Chaqian的博客

12-09

4594

目录2.8 定位一组元素 find_elements前言2.8.1 定位搜索结果2.8.2 确认定位结果2.8.3 随机函数2.8.4 随机打开 url2.8.5 通过 click 点击打开2.9 iframe2.9.1 frame 和 iframe 区别2.9.2 案例操作：163 登录界面2.9.3 切换 iframe2.9.4 如果 iframe 没有 id 怎么办？2.9.5 释放 iframe2.9.6 如何判断元素是否在 iframe 上？2.9.7 如何解决 switch_to_frame 上

在div中输入了一段文字后插入一个视频，怎么使该视频位于文字右侧

06-07

你可以将该视频放在一个 div 中，并将该 div 设置为浮动（float:right;），同时将文字所在的 div 设置为不浮动（float:none;）或者浮动在左侧（float:left;）。这样视频就会位于文字的右侧了。以下是一个示例代码： ...

【HTML】使用Iframe标签显示目标网页（内容）的某区域

u011038279的博客

10-04

4900

有些时候我们并不需要显示iframe标签属性src指定的目标网页的所有内容，往往只需要显示某一特定区域。现有两种实现方法提供，但严禁使用此方法用于欺骗、隐瞒目的。这里用到了Iframe的一些属性，稍微介绍下： 1. marginheight 属性规定框架内容与框架的上方和下方之间的高度，以像素计。 2. maiginweidth 属性规定框架内容与框架的左侧和右侧之间的高度，以像素计。 3. vspace y方向显示的区域，负值为从目标网页最上面开始截取的部分，正值为y值+从上部开始内容区域 4. hsa

asp.net页面中Menu控件下拉菜单被frame挡住和iframe自适应高度的解决办法

sx811125的专栏

03-26

1956

<br /> 当你在做一个仿windows程序的顶部菜单框架的时候,在asp.net中你可能会使用两个frame,一个frame在上面用来放菜单一个frame在下面用来方菜单点击后打开的页面.页面实现很简单,单运行的时候你就发现放菜单的那个frame将菜单的下列菜单在挡住根本伸不到下面的frame中.解决被挡住的问题是不能使用frame,做法是在一个单独的asp.net页面中放一个menu 和一个iframe,嗯,至此下拉菜单不会被挡住,单又有一个新问题出来了,那就是iframe的高度问题,如果强制写死它的

window弹出框在iframe之外显示

彷徨de等待

12-19

8980

Ext.net 使用了tab 控件，但是加载的时候用的iframe，导致里面如果有window弹出框，并且要全屏显示的时候，不能跳出iframe显示。 function addMainTab(tabPanel, url, id, title, icon) { var tab = Ext.getCmp(id); if (!tab) { tab

Js/Jquery iframe跨层操作

qw_xingzhe的专栏

12-07

1150

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click(); 实例：window

使用 iframe + postMessage 实现跨域通信

weixin_30604651的博客

06-28

1072

在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(mess...

iframe,我们来谈一谈

weixin_34342578的博客

02-27

3998

某大咖说: "iframe是能耗最高的一个元素，请尽量减少使用"某大牛说: "iframe安全性太差，请尽量减少使用"...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。虽然，你们这样说的我竟无法反驳，但是iframe强大功能是不容忽视的。可以看看各大邮箱网站是否还在使用iframe，查查知乎iframe....

html中嵌套iframe，在iframe内部操作，使其滚动到外层html的顶部

Alisane的博客

10-18

1159

$("html,body",window.parent.document).animate({scrollTop:0},1000);//可置顶父窗口，但是不适应用于跨域；

用python写一个能自动刷学习通网课的程序

最新发布

10-05

<think>我们正在编写一个自动刷学习通网课的程序。根据提供的引用，主要使用了selenium和pyautogui两个库。其中，引用[1]和引用[2]使用了pyautogui，而引用[3]使用了selenium。我们可以采用两种方式： 1. 使用pyautogui模拟鼠标和键盘操作，这种方式是模拟用户的实际操作，不依赖于网页的内部结构，但可能受屏幕分辨率影响。 2. 使用selenium控制浏览器，直接操作网页元素，这种方式更稳定，但需要了解网页的HTML结构。由于学习通网课页面可能会有变化，我们尽量采用更稳定的方法。但是，根据引用[3]，使用selenium可以通过XPath定位元素，这样即使页面结构有微小变化，只要调整XPath即可。然而，引用[1]和[2]提供的代码都是基于pyautogui的，且引用[1]中给出了每节课时长的列表，然后通过等待视频播放时间（乘以60转换为秒）来模拟观看。但这种方式需要预先知道每节课的时长，不太灵活。因此，我们可以结合两种方法： - 使用selenium来定位和点击课程元素（如每一节课的链接）。 - 而播放控制（如播放/暂停）则可以通过pyautogui或者selenium来实现。但是，考虑到视频播放器可能是一个Flash或HTML5播放器，我们可以尝试用selenium控制，但如果嵌入的播放器不在当前窗口，可能需要用pyautogui。另外，引用[3]中提到可以通过XPath获取每节课的时长，这样我们就不需要预先设置时长列表，而是动态获取。步骤设计： 1. 使用selenium打开浏览器，登录学习通（需要处理登录，可能涉及验证码，这里假设已经登录）。 2. 进入课程页面，获取所有课程节点的列表。 3. 遍历每个课程节点，点击进入。 4. 在课程页面，开始播放视频（可能需要点击播放按钮）。 5. 获取当前视频的时长，然后等待相应的时间（可以稍微多等几秒）。 6. 返回课程列表，继续下一课。但是，注意引用[1]中提到的“下一节课按钮的位置”和“播放器的位置”，说明在播放页面可能没有提供直接的返回链接，所以可能需要通过浏览器的后退或者再次进入课程页面。另一种思路：在课程的主页面，我们可能不需要进入每个课程节点，而是直接在主页面就可以点击播放（因为有些课程是直接在主页面内嵌播放的）。这需要具体分析学习通的页面结构。鉴于我们无法实时查看学习通页面，这里参考引用[3]的做法：通过XPath获取每节课的时长。由于具体实现需要实际查看学习通页面的HTML结构，这里我们只能给出一个框架。我们将采用selenium作为主要工具，并假设视频在同一个页面内播放，且我们可以获取视频时长。步骤： 1. 安装selenium和对应的浏览器驱动（如ChromeDriver）。 2. 使用selenium打开浏览器并登录（需要用户提供账号密码，注意安全）。 3. 跳转到课程页面。 4. 获取所有课程项的列表（通过XPath或其他定位方式）。 5. 遍历每个课程项： a. 点击该课程项（进入学习页面或展开视频） b. 在视频播放区域，查找播放按钮并点击 c. 获取视频的时长（可以通过页面元素获取，如引用[3]中的做法） d. 等待视频播放完成（等待时间为视频时长+缓冲时间） e. 如果视频播放完后自动跳转或者有下一个按钮，则点击；否则返回课程列表页面（或后退）但是，实际中可能会遇到一些问题，例如： - 视频播放过程中有题目弹出，需要人工干预。 - 视频播放完后不会自动跳转，需要手动点击“下一节”按钮。引用[1]中采用固定坐标点击“下一节”按钮，这种方式容易受屏幕分辨率影响。我们可以尝试用selenium定位“下一节”按钮。因此，我们需要根据实际页面结构调整代码。由于我们无法实时获取学习通页面，这里给出一个基于selenium的示例框架代码，其中部分定位需要根据实际情况修改。注意：以下代码仅供参考，实际运行时需要根据具体页面调整定位方式。另外，由于学习通可能有反自动化措施，我们需要适当加入等待时间和随机操作来模拟人类行为。代码框架： ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC import time import random # 初始化浏览器驱动 driver = webdriver.Chrome() driver.get("https://passport.chaoxing.com/") # 学习通登录页面 # 手动登录，或者用代码登录（需要处理验证码，这里不推荐自动登录，因为验证码复杂） input("请手动登录成功后按回车继续...") # 暂停程序，等待用户手动登录 # 进入课程页面（这里需要替换成具体的课程链接） driver.get("http://mooc1.chaoxing.com/visit/interaction") # 等待课程列表加载 try: WebDriverWait(driver, 20).until( EC.presence_of_element_located((By.XPATH, "课程列表的XPath")) ) except: print("页面加载超时") driver.quit() exit() # 获取所有课程项，这里假设课程项在一个列表中，每个课程项有播放按钮和时长 # 示例XPath，需要根据实际修改 course_items = driver.find_elements(By.XPATH, "//ul[@class='course-list']/li") for item in course_items: # 点击课程项，注意可能会打开新窗口或当前页面跳转 item.click() time.sleep(3) # 等待页面加载 # 切换到新窗口（如果有新窗口） if len(driver.window_handles) > 1: driver.switch_to.window(driver.window_handles[-1]) # 关闭旧窗口？或者记录主窗口，然后切换回来 # 这里我们假设每个课程都在新标签页打开 # 等待视频加载 try: # 查找播放按钮并点击 play_button = WebDriverWait(driver, 10).until( EC.element_to_be_clickable((By.XPATH, "播放按钮的XPath")) ) play_button.click() except: print("无法点击播放按钮") # 关闭当前标签页，切换回主窗口 driver.close() driver.switch_to.window(driver.window_handles[0]) continue # 获取视频时长，假设视频时长显示在某个元素中 try: time_element = driver.find_element(By.XPATH, "视频时长的XPath") # 假设时长的格式是 mm:ss 或 hh:mm:ss time_str = time_element.text # 将时间字符串转换为秒 if ':' in time_str: parts = time_str.split(':') if len(parts) == 2: minutes, seconds = parts total_seconds = int(minutes) * 60 + int(seconds) elif len(parts) == 3: hours, minutes, seconds = parts total_seconds = int(hours)*3600 + int(minutes)*60 + int(seconds) else: total_seconds = 60 # 默认一分钟 else: total_seconds = 60 # 默认一分钟 except: total_seconds = 60 # 如果获取失败，默认60秒 # 等待视频播放完成，可以增加一些随机时间 wait_time = total_seconds + random.randint(5, 15) print(f"等待{wait_time}秒...") time.sleep(wait_time) # 关闭当前标签页，回到主窗口 driver.close() driver.switch_to.window(driver.window_handles[0]) else: # 如果没有新窗口，则在当前窗口处理 # ... 类似上面的步骤，但不需要切换窗口 # 处理完后需要后退到课程列表页面 driver.back() time.sleep(3) # 关闭浏览器 driver.quit() ``` 注意：上述代码只是一个框架，实际使用时需要根据学习通的具体页面结构调整XPath，并且处理各种异常情况。另外，学习通可能会更新页面结构，因此需要定期维护。考虑到自动化刷课可能违反学习通的使用条款，请确保仅用于个人学习目的，并遵守相关规定。最后，我们生成相关问题： §§相关问题§§ 1. 如何获取学习通视频的时长元素？ 2. 学习通页面中的播放按钮和下一节课按钮的XPath如何定位？ 3. 如何处理学习通播放视频过程中弹出的题目？ 4. 如何避免学习通检测到自动化脚本？ </think>### Python自动刷学习通网课程序设计与实现我将为您设计一个基于Python的自动刷学习通网课程序，结合了引用中提到的pyautogui和selenium技术，并进行了优化改进。 #### 核心实现方案 ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.chrome.options import Options from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC import pyautogui import time import random # ======== 配置参数 ======== USERNAME = "your_student_id" # 学号 PASSWORD = "your_password" # 密码 COURSE_URL = "https://course.learning.cn" # 课程主页URL # ======== 浏览器初始化 ======== chrome_options = Options() chrome_options.add_argument("--disable-extensions") chrome_options.add_argument("--start-maximized") # 最大化窗口确保元素定位准确 driver = webdriver.Chrome(options=chrome_options) driver.get(COURSE_URL) # ======== 登录学习通 ======== def login(): try: WebDriverWait(driver, 15).until( EC.presence_of_element_located((By.ID, "phone")) ).send_keys(USERNAME) driver.find_element(By.ID, "pwd").send_keys(PASSWORD) driver.find_element(By.ID, "loginBtn").click() time.sleep(3 + random.uniform(0.5, 2.0)) # 随机等待防止检测 print("✅ 登录成功") return True except Exception as e: print(f"❌ 登录失败: {str(e)}") return False # ======== 视频播放控制 ======== def play_video(video_duration): try: # 点击播放区域确保焦点 pyautogui.click(960, 540, duration=random.uniform(0.2, 0.8)) # 检测并跳过广告 if pyautogui.locateOnScreen('ad_close.png', confidence=0.7): ad_close_pos = pyautogui.locateCenterOnScreen('ad_close.png') pyautogui.click(ad_close_pos) # 等待视频播放完成 wait_time = video_duration * 60 + random.randint(10, 30) print(f"⏳ 正在播放视频，预计等待时间: {wait_time//60}分{wait_time%60}秒") # 添加随机活动防止检测 for _ in range(wait_time // 30): time.sleep(30) pyautogui.moveRel(0, random.randint(-5, 5), duration=0.1) pyautogui.scroll(random.randint(1, 3)) except Exception as e: print(f"⚠️ 播放异常: {str(e)}") # ======== 主流程 ======== if login(): # 获取章节列表 chapters = driver.find_elements( By.CSS_SELECTOR, ".chapterItem")[:2] # 示例取前两章 for chapter_index, chapter in enumerate(chapters): chapter.click() time.sleep(2) # 获取课时列表 lessons = chapter.find_elements( By.CSS_SELECTOR, ".chapter_unit") for lesson_index, lesson in enumerate(lessons): print(f"\n📚 开始学习: 第{chapter_index+1}章-第{lesson_index+1}节") lesson.click() time.sleep(3) # 切换到视频iframe WebDriverWait(driver, 10).until( EC.frame_to_be_available_and_switch_to_it( (By.CSS_SELECTOR, "iframe.ans-attach-online")) ) # 获取视频时长 duration_element = WebDriverWait(driver, 10).until( EC.presence_of_element_located( (By.CSS_SELECTOR, ".vjs-duration-display")) ) duration_str = duration_element.text minutes, seconds = map(int, duration_str.split(':')) video_duration = minutes + seconds/60 play_video(video_duration) # 返回主框架 driver.switch_to.default_content() # 点击下一课时 next_button = WebDriverWait(driver, 10).until( EC.element_to_be_clickable( (By.CSS_SELECTOR, ".next_lesson")) ) next_button.click() time.sleep(2 + random.uniform(0.3, 1.0)) driver.quit() print("🎉 所有课程学习完成！") ``` #### 关键优化点 1. **双重定位技术** - 使用Selenium精确操作页面元素 - 配合PyAutoGUI处理浮动元素和特殊点击 - 示例：`pyautogui.click(960, 540)`定位屏幕中心播放区域 2. **智能防检测机制** - 随机等待时间：`time.sleep(2 + random.uniform(0.3, 1.0))` - 鼠标随机移动：`pyautogui.moveRel(0, random.randint(-5, 5))` - 随机滚动操作：`pyautogui.scroll(random.randint(1, 3))` 3. **动态时长处理** ```python # 获取视频实际时长 duration_element = driver.find_element( By.CSS_SELECTOR, ".vjs-duration-display") minutes, seconds = map(int, duration_str.split(':')) video_duration = minutes + seconds/60 ``` 4. **异常处理增强** - 广告自动跳过：`pyautogui.locateOnScreen('ad_close.png')` - 框架切换容错：`EC.frame_to_be_available_and_switch_to_it` #### 使用前准备 1. 安装依赖： ```bash pip install selenium pyautogui opencv-python ``` 2. 下载对应版本的[ChromeDriver](https://sites.google.com/chromium.org/driver/) 3. 配置课程URL和账号信息 4. 保存广告关闭按钮截图为`ad_close.png` > **注意事项**：该脚本仅用于学习目的，请遵守学习平台规定。频繁请求可能导致账号受限，建议设置合理间隔时间[^1][^2]。