Embedding a webpage into dash app

Dash Python
1

Good day guys. I have been trying to find a string that talks of how to embed a webpage into Dash app, where the content that will be displayed will change whenever someone selects something either through a dropdown menu or via a button selection. eg
app.layout=html.Div([
html.Div([ Drodown])
html.Div([webpage is embedded here based on value selected])
])
@app.callback([…

2

I imagine you could achieve this through a Dash callback that targets the ‘children’ attribute of the container element you want the page to be embedded in, and then depending on the dropdown value, return an iframe with the appropriate ‘src’ attribute.

1 Like
3

more or less what am looking to achieve. any link to an example. am new to dash and have been experimenting with it, actually havent done any webdevelopment but was used to python for doing computations and simulations, so now am trying to make it attractive for a front end viewer

1 Like
4

Here’s an example I made up:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash()
app.layout = html.Div([
    html.Div(id='target'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Video 1', 'value': 'video1'},
            {'label': 'Video 2', 'value': 'video2'},
            {'label': 'Video 3', 'value': 'video3'},
        ],
        value='video1'
    )
])


@app.callback(Output('target', 'children'), [Input('dropdown', 'value')])
def embed_iframe(value):
    videos = {
        'video1': 'sea2K4AuPOk',
        'video2': '5BAthiN0htc',
        'video3': 'e4ti2fCpXMI',
    }
    return html.Iframe(src=f'https://www.youtube.com/embed/{videos[value]}')
4 Likes
5

Where I can see the output ?
is it under http://127.0.0.1:8050/… Please confirm @nedned @chriddyp

Do we need to use the same link for all our codes or Can we customize ?

Thanks !

6

If you’re running the app on your local machine, then yes, you will be accessing it from http://127.0.0.1:8050 (or http://localhost:8050). You can however specify a different port number when invoking the run_server method on the dash app (eg app.run_server(port=5000)). This is useful if you want to have multiple apps running simultaneously.

If you want to make it publicly available, you can of course look into various hosting options, including using your own domain name.

1 Like
8

Hi @nedned I am wondering if there is a way also to embed PDF files using html.Iframe.

Here is below how I tried but could succeed.

import dash
import dash_html_components as html
import base64

app = JupyterDash('aa')

app.layout = html.Div([
       html.H1('Title'),
   html.Iframe(  src = "assets/example.pdf")
])

app

It is been 2 years for this conversion but I really appreciate if you can help me.

9

This has saved me so much time, I made an account just to say thanks!

1 Like
10

Oh that’s great to hear! thank you so much for the lovely feedback :slight_smile:

11

I would look at best-practice strategies for doing this this with vanilla HTML, and then work out which of those techniques can be used with Dash.

I’m not too familiar with best practice ways of embedding PDFs in HTML, but this Stack overflow questions looks like a good place to start: Recommended way to embed PDF in HTML? - Stack Overflow