✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Multi-Page Apps and URL Routing with html.Iframe layout

Dear Community,

I tried to embed an external website as html.Iframe on one of my app pages. However the URL routing recursively pointing back to index page. See sample code below. Any suggestion?

Thanks

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

index_page = html.Div([
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])

page_1_layout = html.Div([
    html.H1('Page 1'),
])

page_2_layout = html.Div([
    html.H1('Page 2'),
    html.Iframe(src='www.google.co.uk')
])


@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page

if __name__ == '__main__':
    app.run_server(host="0.0.0.0", port=8080)

Does anyone know an alternative way to do it?