3

I am using the code below to show/hide divs by class, so that when a language is chosen, only the right divs are visible.

当使用单选按钮选择语言时，这可以正常工作，但是当新页面加载到 iframe 中时，语言首选项不会应用于该页面。我正在尝试为此使用 sessionStorage，并且已经将参数传达给 iframe 中新加载的页面：

更改开关时，index.html 头中的此内容可更改当前加载页面中的显示/隐藏：

<script>
function setlang(lang) {
    var i;
    var len;
    var list;
    var ifr = document.getElementById('mainframe');
    var cw = (ifr.contentWindow || ifr.contentDocument);

    list = cw.document.getElementsByClassName('langdiv');

    for (i=0, len=list.length ; i<len ; i++){
        list[i].style.display = 'none';
        }

    list = cw.document.getElementsByClassName(lang);

    for (i=0, len=list.length ; i<len ; i++){
        list[i].style.display = 'block';
        }
}

</script>

这在 index.html 正文中应用新语言并将其保存到 sessionStorage：

    <div class="switch">
            <input id="english" name="view" type="radio" checked onclick="setlang('EN'); sessionStorage.setItem('language', 'EN');">
            <input id="deutsch" name="view" type="radio" onclick="setlang('DE'); sessionStorage.setItem('language', 'DE');">    
            <input id="francais" name="view" type="radio" onclick="setlang('FR'); sessionStorage.setItem('language', 'FR');">   
            <input id="italiano" name="view" type="radio" onclick="setlang('IT'); sessionStorage.setItem('language', 'IT');">   
    </div>

<div id="iframe"><iframe name="mainframe" id="mainframe" src="home.html"></iframe></div>

...在给定的 iframe 中，我检索 sessionStorage 参数（此代码仅用于确保它正常工作 - 我不需要显示 sessionStorage 参数：

<script>
    window.onload=function applylanguagechoice() {
        if(typeof(Storage) !== "undefined") {
        document.getElementById("language").innerHTML = "SELECTED LANGUAGE=" +           sessionStorage.language;
        } 
    }
</script>

相反，我需要使用它来显示/隐藏正确的 div 类，这些类在 iframe 中的组织方式如下：

   <div class="EN languid">Hello</div>
   <div class="DE languid">Guten Tag</div>
   <div class="FR languid">Bonjour</div>
   <div class="IT languid">Ciao</div>

就像现在一样，我有以下（在我的估计中非常笨拙）代码来从 sessionStorage 中获取值：

<script>
    $(document).ready(function(){
        var selectedlanguage = sessionStorage.getItem("language");

        if (selectedlanguage == 'EN') {
            $('.EN').show();
            $('.DE').hide();
            $('.FR').hide();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'DE') {
            $('.EN').hide();
            $('.DE').show();
            $('.FR').hide();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'FR') {
            $('.EN').hide();
            $('.DE').hide();
            $('.FR').show();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'IT') {
            $('.EN').hide();
            $('.DE').hide();
            $('.FR').hide();
            $('.IT').show();
            } 
    });
</script>

谁能帮助我更好地采用 sessionStorage 参数并将其应用于隐藏/显示 div？

谢谢！

4

0 回答 0