python - Dash 文档页面：markdown 链接在 html.IFrame 中重新加载整个仪表板

问题描述

我正在处理dash仪表板。目前我将添加一个文档部分。
我将文档编写为 markdown ( info.md)，然后将其内容复制并粘贴到 Jupyter Notebook 中（在设置为 Markdown 的单元格中），以便将文件下载为 html ( info.html)。最后，我用 Python 读取了这个文件并将其内容存储在一个字符串 ( info) 中。
在仪表板中有两个dbc.Tabs，在第二个 ( 'Page 2') 中，我放置了一个html.IFrame用于显示info字符串内容的。它给了我这个页面：

在文档中有一个带有一些链接的索引。理想情况下，这些链接会将用户引导至文档的子部分。然而，当我点击一个链接时，整个仪表板都在里面重新加载html.IFrame，我得到了这个：

如果我尝试重新单击链接，则不会发生任何事情。
如何避免在html.IFrame? 当我单击索引链接时，我只想被重定向到文档页面内的该内容。

这里是仪表板的代码：

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

info_file = r'info.html'
with open(info_file, encoding = 'utf-8') as file:
    info = ''.join(file.readlines())

app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])

app.layout = html.Div(id = 'general_div',
                      children = [html.Div(id = 'title_div',
                                           children = [html.H2(children = 'Title',
                                                               style = {'width': '100%',
                                                                        'text-align': 'center'})]),

                                  dbc.Tabs(children = [dbc.Tab(label = 'Page 1',
                                                               children = [html.P('Some text here')]),

                                                       dbc.Tab(label = 'Page 2',
                                                               children = html.Iframe(srcDoc = info,
                                                                                      style = {'display': 'block',
                                                                                               'box-sizing': 'border-box',
                                                                                               'horizontal-align': 'center',
                                                                                               'width': '100%',
                                                                                               'height': 850}))])])

if __name__ == '__main__':
    app.run_server()

这里是降价文件：

## Index

1. [Chapter 1](#Chapter-1)
   1. [Part 1](#Part-1)
   2. [Part 2](#Part-2)
2. [Chapter 2](#Chapter-2)
   1. [Part 1](#Part-1)


## Chaper 1

### Part 1

### Part 2 

## Chapter 2

### Part 1

我会报告 html 文件，但它很长（超过 13k 行），所以我在这里只报告<body>部分。在任何情况下，为了生成整个 html 文件，可以将 markdown 文件复制并粘贴到 Jupyter Notebook markdown 单元格中，然后像我目前一样将 notebook 下载为 html 文件。

<body>
  <div tabindex="-1" id="notebook" class="border-box-sizing">
    <div class="container" id="notebook-container">

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
</div><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Index">Index<a class="anchor-link" href="#Index">&#182;</a></h2><ol>
<li><a href="#Chapter-1">Chapter 1</a><ol>
<li><a href="#Part-1">Part 1</a></li>
<li><a href="#Part-2">Part 2</a></li>
</ol>
</li>
<li><a href="#Chapter-2">Chapter 2</a><ol>
<li><a href="#Part-1">Part 1</a></li>
</ol>
</li>
</ol>
<h2 id="Chaper-1">Chaper 1<a class="anchor-link" href="#Chaper-1">&#182;</a></h2><h3 id="Part-1">Part 1<a class="anchor-link" href="#Part-1">&#182;</a></h3><h3 id="Part-2">Part 2<a class="anchor-link" href="#Part-2">&#182;</a></h3><h2 id="Chapter-2">Chapter 2<a class="anchor-link" href="#Chapter-2">&#182;</a></h2><h3 id="Part-1">Part 1<a class="anchor-link" href="#Part-1">&#182;</a></h3>
</div>
</div>
</div>
    </div>
  </div>
</body>

编辑

我检查了html.IFrame 文档并尝试使用该sandbox参数：

...
children = html.Iframe(srcDoc = info,
                       sandbox = '',
                       style = {'display': 'block',
                                'box-sizing': 'border-box',
                                'horizontal-align': 'center',
                                'width': '100%',
                                'height': 850})
...

html.IFrame这样可以避免在;中重新加载整个仪表板。但是，当我点击一个链接时，html.IFrame内容变为空，它出现一个Loading...标签，没有任何反应......

标签： pythonhtmlplotlymarkdownplotly-dash

python - Dash 文档页面：markdown 链接在 html.IFrame 中重新加载整个仪表板

问题描述

解决方案

推荐阅读