使用 jQuery 重新加载页面后如何保存 CSS 值？答案

【问题标题】：How do i save CSS values after page reload with jQuery?使用 jQuery 重新加载页面后如何保存 CSS 值？
【发布时间】：2019-11-24 03:15:51
【问题描述】：

我的网站上有一个简单的语言下拉菜单，可以更改 iframe 中的语言。问题是，每当我切换到 iframe 中的下一页时，语言都会设置回其默认值，即使下拉菜单仍在使用另一种语言。

HTML：

<input type="checkbox" id="checkbox_English" checked style="display: none">
<input type="checkbox" id="checkbox_German" style="display: none">
    <select id="language_Dropdown">
        <option value="english">English</option>
        <option value="german">Deutsch</option>
    </select>

主页上的CSS：

#language_Dropdown{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px black solid;
    border-right: 1px black solid;
    border-bottom: 2.5px black solid;
    border-left: 1px black solid;
    border-radius: 7.5%;
    font-family: PixelGosub, Roboto, sans-serif;
    color: white;
    background-color: black;}

iFrame 中的 CSS：

.english{
    display: unset;}
.german{
    display: none;}

jQuery:

$(document).ready(function() {
    $( "#language_Dropdown" ).change(function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            $( "#checkbox_English" ).prop( "checked", true );
            $( "#checkbox_German" ).prop( "checked", false );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german"){
            $( "#checkbox_English" ).prop( "checked", false );
            $( "#checkbox_German" ).prop( "checked", true );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

我读过我必须使用 cookie 来做到这一点，但我对 jQuery 很陌生，而且我查找的大多数解决方案都非常先进...... 有没有更简单的方法可以在我的代码中添加一些内容以使其正常工作，还是我走错了路？

【问题讨论】：

iframe 的 URL 是什么？您可能需要使用以下查询参数打开 iframe； http://www.iframe.com?lang=eng
欢迎来到 Stack Overflow。如果这都在同一个域下，您可以使用 Browser Cookie to LocalStorage 变量来执行此操作。问题变成了您希望浏览器存储首选项多长时间。您还可以编写一些方便的函数来更轻松地添加和读取 cookie。
看这里：stackoverflow.com/questions/56503795/…
您正在使用 iFrame.find 进入 iframe 文档以直接操作其中元素的显示属性（您甚至没有像标题中提到的那样使用类，您正在设置内联样式） - 当然，当 iframe 内的文档完全被导航到新文档所取代时，所有这些都会丢失。您必须通过 iframe 的 load 事件来处理该问题，以重复相同的过程 - 从父文档或从加载到其中的（新）文档内部。
但是使用 iframe 有很多问题（可用性、搜索引擎优化、...），我认为没有必要进一步讨论上述问题 - 您应该改变整个方法。研究这样的东西的服务器端技术，而不是客户端。（对于 SEO 而言，这里特别糟糕的可能不仅是 iframe 本身的使用，而且您在同一个文档中有两种语言版本。您可以/应该让每个语言版本都在适当的元素 - 但首先最好将每种语言的文档分开。）

标签： jquery html css cookies save

【解决方案1】：

感谢大家的回复，

我查找了 04FS 提到的加载方法，并找到了适合我的方法。

这是添加的代码：

$(document).ready(function() {
    $("#iFrame_Content").on( "load", function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

【讨论】：