How to get the part of webpage with ui.html & iframe

[JamesShiYB]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

with ui.card().tight():
    ui.image('https://picsum.photos/id/684/640/360')
    with ui.card_section():
        ui.label('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...')

ui.run(9000)

from nicegui import ui

with ui.card().classes('fixed-center').style('background-color: black').props('top=100 left=100 width=500 height=500'):
    ui.html(
        '<iframe src="http://127.0.0.1:9000/" top=100 left=100 width=200 height=100></iframe>)')
ui.run()

Description

First part of the codes is a webpage example with port=9000
Second part is to try to get the part of the above webpage defined by "top" "left" "width"and "height". It does not work as expected.

NiceGUI Version

2.22.1

Python Version

12.10

Browser

Chrome

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @JamesShiYB,

You can't run two NiceGUI app side-by-side like this. The first ui.run is blocking, so the second part isn't running.

But you could define a separate endpoint for the iframe content:

@ui.page('/inline')
def inline():
    ui.image('https://picsum.photos/id/684/640/360')

with ui.card():
    ui.html('<iframe src="/inline" top="100" left="100" width="200" height="100"></iframe>')

[aitech95]

Hi falkoschindler,

Thank you very much for your reply.

However, what I need is a portion of a web page, including images, videos, buttons, and text, not a part of an image.

The problem is a bit complicated and I'm not sure if it's easy to solve.

[falkoschindler]

I just shortened the example a bit. But inline can return a more complex page.

[aitech95]

Thank you very much!

I think 'iframe' cannot reach my goal and I need seek other solutions.

For example, I can't get the input box via iframe in the Google search page.

Anyway thank you very much for your reply.