Dash Iframe shows the whole dash application recursively

Dash Python
1

Hi, I’m trying to integrate Pyvis (Interactive network visualizations — pyvis 0.1.3.1 documentation) inside Dash. It produces dynamic HTML containing rendered graph as an output and I want to integrate it inside Dash html.Div. I have tried using Iframe, but for some reason, it shows the content of the whole application recursively and does not show graph.
(Sorry, if this is a duplicate - couldn’t find a relevant answer)

import dash
import dash_html_components as html
from pyvis.network import Network
import networkx as nx

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

nt = Network(height='750px', width='100%', bgcolor='#222222', font_color='white',
             notebook=False)
nt.inherit_edge_colors(True)
gx = nx.lollipop_graph(10, 4)
nt.from_nx(gx)
nt.write_html('test_graph.html')

app.layout = html.Div(children=[
    html.H1(children='Pyvis graph visualization inside Dash'),

    ##############  Pyvis html graph import  #####################
    html.Div(children=[
        html.Iframe(src="test_graph.html",
                    style={"height": "1067px", "width": "100%"})
    ])
])
2

Ok, I’ve solved the issue by providing raw HTML via Iframe’s scrDoc argument:

html.Div(children=[
        html.Iframe(srcDoc=nt.html,
                    style={"height": "1067px", "width": "100%"})

(Although, I still do not understand why the recursiveness appears when loading HTML as it is)