我有一個(gè)通過jinja2/flask呈現(xiàn)的簡單HTML頁面(main.html)。

main.html

{% extends 'layout.html' %}

{% include 'content1.html' %}
{% include 'widget1.html' %}
{% include 'widget2.html' %}

layout.html包括一些CSS(引導(dǎo))，JS和一些HTML(標(biāo)題/菜單)的所有頁面。

我希望在這個(gè)html頁面中簡單地包含一些內(nèi)容模板和一些“小部件”。小部件更復(fù)雜，因?yàn)樗鼈儼约旱腏S和CSS(引導(dǎo))...這造成了麻煩，因?yàn)閣idget1.html的CSS覆蓋了main.html的CSS(考慮到包含在內(nèi)，這并不意外)。

有沒有什么方法可以“包含”widget1.html，而不需要CSS/JS返回到父頁面(main.html)？

我寧愿不必重構(gòu)widget1.html，因?yàn)樗且粋€(gè)外部應(yīng)用程序。這里有簡單的解決方法嗎？

提前感謝！

看這個(gè)回答:如何將一個(gè)div從公共CSS樣式中隔離出來？

您可以創(chuàng)建一個(gè)包裝類。隔離，并按如下方式使用它:

p {
  color: blue;
}

.isolate * {
  all: unset;
}

.example {
  border: 1px solid;
  padding: 1em;
}

<p>By default all text is blue.</p>
<div class="isolate example">
  <p>Within the "isolate" div, that CSS is removed</p>
</div>
<p>Outside of the div, default rules apply once again.</p>

我在這里也有同樣的問題。甚至改變了。css，沒有重新加載，因?yàn)闉g覽器正在緩存信息。我發(fā)現(xiàn)了一個(gè)非常簡單的方法。

我解決這個(gè)問題的方法是從時(shí)間模塊中導(dǎo)入ctime，如下所示:

從時(shí)間導(dǎo)入ctime

然后，我將ctime()函數(shù)歸因于我的flask路徑中的時(shí)間。像這樣:

#

#@app.route('/home')
## def homepage():
##     return render_template('home.html' , time = ctime())

然后，在我的html href中，我這樣做了:

## <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')}}?{{time}}">

在引用路徑的末尾添加？{{time}}這樣，時(shí)間信息將 每秒更新一次，瀏覽器不會(huì)識(shí)別css并緩存它，因?yàn)闉g覽器會(huì)將新信息與以前的信息進(jìn)行比較。

有了這個(gè)，你就成了你的實(shí)時(shí)css。

希望這有所幫助。

干杯！

內(nèi)利奧

我知道這是一個(gè)老話題，但是我在尋找解決一個(gè)類似問題的過程中反復(fù)遇到這個(gè)問題。最后，我使用srcdoc屬性將內(nèi)容包裝在iframe中。看起來是這樣的:

<tr class="collapse" id="emailHTMLBody-{{ index }}">
  <td colspan="7">   
    <div class="email-body-container">
      <iframe srcdoc="{{ email.body_content }}"></iframe>
    </div>
  </td>
</tr>

我希望這能幫助下一個(gè)偶然發(fā)現(xiàn)這個(gè)問題的人。