每次重新打开＆无需内核时，如何使交互式Jupyter Notebook也通过IPython.display执行Javascript

如何解决每次重新打开＆无需内核时，如何使交互式Jupyter Notebook也通过IPython.display执行Javascript

经过一番努力，我得以运行外部CSS和JavaScript并修改Jupyter Notebook中单元格的输出。

即使不执行单元格（假设您在执行所有单元格后都保存了笔记本），CSS仍然可以正常工作。

但是，JavaScript并非如此。在执行基于Python的单元格之后，我必须执行注入Javascript的单元格，以使JavaScript对输出产生有意义的作用。无法执行在Python之前或在同一单元中插入JavaScript的单元格。它总是必须在Python单元之后。

这就是我要解决的问题。就像外部CSS不需要我一次又一次地执行单元，甚至不需要实时内核一样，我也希望JavaScript做到这一点。在这里，我也愿意拥有一个实时内核。但是，尽管有一个实时内核，但到目前为止仍需要执行JS单元。

是否可以让js处理单元格的输出而无需实际执行始终注入JS的单元格？我的意思是，保存完笔记本并执行所有单元格后，只要重新打开JS，它便会自动工作。

任何想法我该怎么做？

以下示例是我目前正在使用的示例（JS和CSS基本上修改了范围滑块和拇指）。
在.ipynb文件中-
单元1 -尽管有内核，交互Python输出仍然有效

import altair as alt
from vega_datasets import data

source = data.population.url

pink_blue = alt.Scale(domain=('Male','Female'),range=["steelblue","salmon"])

range_slider = alt.binding_range(min=1900,max=2000,step=10)
select_year = alt.selection_single(name="year",fields=['year'],bind=range_slider,init={'year': 1900})

alt.Chart(source).mark_bar().encode(
    x=alt.X('sex:N',title=None),y=alt.Y('people:Q',scale=alt.Scale(domain=(0,12000000))),color=alt.Color('sex:N',scale=pink_blue),column='age:O'
).properties(
    width=20
).add_selection(
    select_year
).transform_calculate(
    "sex",alt.expr.if_(alt.datum.sex == 1,"Male","Female")
).transform_filter(
    select_year
).configure_facet(
    spacing=8
)

单元格2 -修改上述外观的CSS和JS。 CSS可以随时工作，但是要使JS正常工作，每次重新打开笔记本时，我都必须一次又一次地执行单元格。

from IPython.display import display,HTML,Javascript

display(HTML("""
<script type="text/Javascript">
    //document.addEventListener("DOMContentLoaded",function(event) {
    {
        // add color fill when drag
        const sliderColors = {
            fill: "#CE4931",background: "#999",};

        const slider = document.getElementsByName("year_year")[0];

        slider.addEventListener("input",(event) => {
            applyFill(event.target);
        });

        function applyFill(slider) {
            const percentage =
                (100 * (slider.value - slider.min)) / (slider.max - slider.min);

            const bg = `linear-gradient(90deg,${sliderColors.fill} ${percentage}%,${sliderColors.background} ${percentage}%)`;
            slider.style.background = bg;
        }

        applyFill(slider);
    }
//});
</script>

<style>
    input:hover {
        opacity: 1;
    }

    input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: red;
        cursor: pointer;
        border-radius: 0;
        border: 0;
        position: relative;
        width: 4px;
        height: 15px;
        background-color: #595959;
    }
    input::-moz-range-thumb {
        -moz-appearance: none;
        appearance: none;
        background: red;
        cursor: pointer;
        border-radius: 0;
        border: 0;
        position: relative;
        width: 4px;
        height: 15px;
        background-color: #595959;
    }
    input {
        background: rgba(0,0) linear-gradient(90deg,rgb(206,73,49) 0%,rgb(153,153,153) 0%) repeat scroll 0% 0%;
        -webkit-appearance: none;
        width: 100%;
        border-radius: 3px;
        margin: 0;
        position: relative;
        height: 3px;
        cursor: pointer;
        -webkit-transition: .2s;
        transition: opacity .2s;
        transition: all ease-in 0.25s;
    }

    input:focus,button:focus {
        outline: none;
    }

    iframe {
        sandBox: allow-modals allow-forms allow-popups allow-scripts allow-same-origin;
    }
</style>
"""))