Question

目前正在尝试在静态服务器上创建网站。在JSON代码中，它应该在一个框架和右侧框架中创建一个＆＃34;之前的＆＃34;和＆＃34; next＆＃34;按钮根据层次结构中的当前位置。

我认为问题在于我的全局变量＆＃34;在所有3帧中都无法访问chap和subchap（您将在下面的代码中找到）。我不知道如何简化问题，对不起这篇文章很抱歉。

如果你想看到它，我收到了我服务器上的所有文件：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-Server上，它不在本地）。单击链接时，变量chap和subchap应该采用数组中元素编号的值。（ - ＆gt; onclick =＆＃39; ..＆＃39;）

        //********* 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没有我希望它们具有的值。点击＆＃34;下一个：＆＃34;链接，子章节应增加一个。

        //********* 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/>");
        }
});

Answer 1

在iframe中，您可以访问window.parent

因此...

在主窗口中：

window.cake = "Tasty!"

然后在你的iframe中：

var isTasty = window.parent.cake

希望这有帮助！

Answer 2

我相信你的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();
}

在多个帧中使用变量

2 个答案: