Использование переменной в нескольких кадрах

В данный момент пытаюсь создать сайт на статическом сервере. Из JSON-кода следует создать навигацию в одном кадре, а в правом боковом кадре - кнопки "предыдущий" и "следующий" в соответствии с текущей позицией в иерархии.

Я думаю, что проблема в том, что мои главы и подразделы "глобальные переменные" (которые вы найдете в приведенном ниже коде) не могут быть доступны во всех 3 кадрах. Я не знал, как упростить проблему, извините за большой пост.

Я получил все файлы на своем сервере, если вы хотите увидеть его вживую: http://fabitosh.bplaced.net/SkriptET/start.html
Файлы: http://fabitosh.bplaced.net/SkriptET/
files.json не используется в коде, но нагляднее, чем реализация в json.js

Сначала основная структура:

index.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <script type="text/javascript" src="json.js"></script>
<!--     <link rel="stylesheet" href="style.css"> -->
  </head>
    <frameset cols="300,*,300">
    <frame src="navigation.html" name="navigation"/>
    <frame src="elladq.html" name="content"/>
    <frame src="sidebar.html" name="rightsidebar"/>
    </frameset>
</html>

navigation.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <base target="content">
</head>
<body>
    <div id="left">
        Die Navigation<br/>
    </div>
</body>
</html>

rightsidebar.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
    <div id="right">
        Die Sidebar <br/>
        <script type="text/javascript">
            alert("I reloaded!");
        </script>
    </div>
</body>
</html>

Теперь это становится немного сложнее. Следующие части отсутствуют в javascript.js. Я попытаюсь объяснить мои мысли в разных частях.

Переменные chap и subchap считаются своего рода памятью текущей позиции в иерархии. В зависимости от того, по какой ссылке вы нажимаете, они должны адаптироваться. Рамка навигации никогда не должна перезагружаться, поэтому я надеюсь, что они могут быть сохранены там. (Большой знак вопроса)

$(document).ready(function(){ // DOM needs to exist in order to be able to add stuff in there
    //JSON-Data coming out of json.js which also converts it in a way to be accessed by data.chapter[chap].subchapter[subchap]
    var chap = 1; //position in the array of the currently open chapter
    var subchap = 0; //position in the array of the currently open subchapter

Следующая часть вроде работает. Навигация создается в соответствии с JSON-структурой. При нажатии на ссылку, правый фрейм перезагружается (по крайней мере, на ftp-сервере, это не локально). При нажатии на ссылку переменные chap и subchap должны принимать значения номера элемента в массиве. (-> onclick='..')

        //********* Create Navigation out of JSON File *********
        for(var i = 0; i < data.chapter.length; i++) { 
            $('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b><ul>");
            for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
                $('#left').append("<li><a href='"+data.chapter[i].subchapter[j].url+"' onclick='chap="+i+"; subchap="+j+"; parent.rightsidebar.location.reload();'>"+data.chapter[i].subchapter[j].title+"</a></li>"); // target="content"; defined in sidebar.html header
            }
            $('#left').append("</ul>");
        }

Это то, что еще не работает. Переменные chap и subchap не имеют значений, которые я хочу, чтобы они имели. Если щелкнуть ссылку "Далее:", то подзаголовок должен увеличиться на единицу.

        //********* Previous Page / Next Page *********
        if (subchap>0){
            $('#right').append("<a href='"+data.chapter[chap].subchapter[subchap-1].url+"' target='content' onclick='subchap-=1; parent.rightsidebar.location.reload();'> Previous: "+data.chapter[chap].subchapter[subchap-1].title+"</a><br/>");
        } if (subchap<data.chapter[chap].subchapter.length) {
            $('#right').append("<a href='>"+data.chapter[chap].subchapter[subchap+1].url+"' target='content' onclick='subchap+=1; parent.rightsidebar.location.reload();'> Next: "+data.chapter[chap].subchapter[subchap+1].title+"</a><br/>");
        }
});
Источник

2 ответа

В iframe вы можете получить доступ window.parent

Так...

в вашем главном окне:

window.cake = "Tasty!"

тогда в вашем iframe:

var isTasty = window.parent.cake

Надеюсь, это помогло!

Источник

Я полагаю, что причина, по которой ваши переменные chap и subchap не увеличиваются или уменьшаются, заключается в том, как вы назначали события onclick. При таком встроенном javascript вы должны объявить subchap и chap на глобальном уровне. Переехать

var chap = 1;
var subchap = 0;

на линию раньше

$(document).ready(function(){

так это будет выглядеть следующим образом:

var chap = 1;
var subchap = 0;
$(document).ready(function(){
   //ready code here
});

Вы также можете рассмотреть возможность использования jquery .on("click", function(){}).

for(var i = 0; i < data.chapter.length; i++) { 
    $('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b>");
    var subChapUl = $('<ul class="subchap-list"></ul>');
    for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
        var subChap = $('<li><a href="'+data.chapter[i].subchapter[j].url+'" data-subchap="' + j + '" data-chap="' + i + '">'+data.chapter[i].subchapter[j].title+'</a></li>');
        subChap.on("click",subChapClick);
        subChapUl.append(subChap);
    }
        $('#left').append(subChapUl);
}    

//at the global level define the following function:
function subChapClick(e) {
     e.preventDefault();
     var el = $(e.target);
     chap = el.attr("data-chap");
     subchap = el.attr("data-subchap");
     parent.rightsidebar.location.reload();
}
Источник
Другие вопросы по тегам