nodriver 切换普通的iframe和隐藏的iframe

nodriver 在切换到隐藏的iframe是有些麻烦的,并不能直接搜索到iframe

import json
from nodriver import start, cdp, loop
import nodriver as uc

async def switch_to_frame(browser, frame):
    """
    change iframe
    """
    iframe_tab: uc.Tab = next(
        filter(
            lambda x: str(x.target.target_id) == str(frame.frame_id), browser.targets
        )
    )
    return iframe_tab

async def main():
    browser_args = ['--disable-web-security']
    browser = await uc.start(browser_args=browser_args)
    tab = browser.main_tab
    tab = await browser.get("http://www.yescaptcha.cn/auth/login")
    for _ in range(10):
        await tab.scroll_down(50)
    await tab
    await tab.sleep(15)

    #解决普通iframe 直接可以搜索到iframe标签 
    # query_selector = await tab.select_all('button[class="widgetLabel moveFromRightLabel-enter-done"]', include_frames=True)
    # print('query_selector:', query_selector)
    # if len(query_selector) == 1:
    #     await query_selector[0].click()

    #解决带有Cross-origin属性的隐藏iframe
    recaptcha0 = await tab.select('iframe[title="reCAPTCHA"]')
    print('recaptcha0:', recaptcha0.frame_id)
    
    iframe_tab = await switch_to_frame(browser, recaptcha0)
    print('iframe_tabwebsocket_url:', iframe_tab.websocket_url)
    iframe_tab.websocket_url = iframe_tab.websocket_url.replace("iframe", "page")
    button = await iframe_tab.select("span#recaptcha-anchor")
    await button.click()
    input('stop')
    
    
if name == "main":
    loop().run_until_complete(main())

`iframe` 元素在网页布局中非常有用,可以嵌入其他HTML文档、视频或应用程序。但是当 `iframe` 的内容高度超过其容器允许的高度时,可能会超出显示范围并不可见,导致用户无法查看到其内容。这种情况通常发生在 `iframe` 内容长度未知的情况下,比如动态加载的内容。 ### 解决方案 #### 使用CSS调整样式: 可以通过 CSS 来控制 `iframe` 的大小以及如何处理溢出的内容。以下是一些常用的方法: 1. **设置固定的 `height` 和 `width`**: 如果你知道需要展示的内容宽度和高度,可以直接给 `iframe` 设置固定的尺寸。 ```html <iframe src="your-url" width="600" height="450"></iframe> ``` 2. **使用 `max-height` 或 `max-width`**: 这样可以根据容器的最大尺寸来限制 `iframe` 的大小,避免内容超出边界。 ```html <iframe src="your-url" style="max-width: 100%; max-height: 90vh;"></iframe> ``` 这里的 `max-height: 90vh;` 表示最大高度不超过视口高度的 90%。 3. **添加滚动条**: 如果内容过多,可以允许 `iframe` 自动调整大小,并在其内部加入滚动条以便用户浏览全部内容。 ```html <iframe src="your-url" frameborder="0" scrolling="auto"> </iframe> ``` #### 动态调整大小: 如果 `iframe` 的内容是动态变化的,你需要通过 JavaScript 监听 `iframe` 的内容改变,并相应地调整其大小。 ```javascript const iframe = document.getElementById('myIframe'); iframe.onload = function() { const contentHeight = iframe.contentWindow.document.body.scrollHeight; iframe.style.height = `${contentHeight}px`; }; ``` 这段脚本会在 `iframe` 完全加载后,测量其内部元素的实际高度,并将这个高度应用到外部 `iframe` 的 `style.height` 属性上。 ### 相关问题: 1. **为什么我的iframe内容显示不完整?** 可能的原因包括未指定固定大小、外部样式冲突或是内容本身的高度超出预期等。 2. **如何在iframe内实现自适应大小而不使用JavaScript?** 利用 CSS 中的百分比单位以及设置合适的 `max-height` 和 `max-width`,可以实现基本的自适应功能,不需要额外的 JavaScript 介入。 3. **如何优化iframe的加载性能?** - 减少嵌入页面的资源加载时间; - 避免不必要的样式计算; - 仅加载必要的JavaScript; - 尽量使用缓存策略和CDN加速访问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值