Question

我试图用iframe做点什么，而且此刻正在努力。基本上，我有一个脚本生成一个正方形网格（下图），我想这样做，以便当我点击一个正方形时，我会在不同的iframe中显示一些内容。

例如，假设我有第1帧（包含网格）和第2帧（这是＆＃34;显示＆＃34;帧）。如果我点击左上角的方块，那么我想显示＆＃34; index（0,0）＆＃34;在显示框架中。如果我点击（1,1）方格，那么我想显示＆＃34; index（1,1）＆＃34;等等。

我已经知道如何在同一帧内执行此操作（即如果我单击第1帧中的方块，我可以在第1帧中显示＆＃34; index（0,0）＆＃34;）但我是只是混淆了如何在一个单独的框架中这样做。我已经尝试过很多东西，但似乎没有任何工作。

我将在下面提供我的所有代码以及一张图片供您参考。非常感谢任何帮助！

使用Javascript：

// I know this isnt good coding practice, but I was getting desperate
// trying things xD
var currentDisplay = "display";

function changeSquare() {
    var image = document.getElementById(this.id);

    // If image is currently green square, change to red, and vice versa
    if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
        image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
    } else {
        image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
    }
    currentDisplay = this.id;
};

function printInfo() {
    document.write(currentDisplay);
}

// Creates a grid of dimensions width by height
function makeGrid(height, width) {

    // Loop over height and width to create black square objects with
    // buttons in middle
    for (i = 0; i < height; i++) {
        for (j = 0; j < width; j++) {
            // Outer div is black square
            var div = document.createElement("div");
            div.className = "square";
            div.id = ("div").concat(i,",", j);

            var innerDiv0 = document.createElement("div");
            innerDiv0.className = "content";
            div.id = ("innerDiv0").concat(i,",", j);
            div.appendChild(innerDiv0);

            // InnerDiv1 & 2 are table structures (necessary for alignment)
            var innerDiv1 = document.createElement("div");
            innerDiv1.className = "table";
            div.id = ("innerDiv1").concat(i,",", j);
            innerDiv0.appendChild(innerDiv1);

            var innerDiv2 = document.createElement("div");
            innerDiv2.className = "table-cell";
            div.id = ("innerDiv2").concat(i,",", j);
            innerDiv1.appendChild(innerDiv2);

            // Add green square image
            var image = document.createElement("img");
            image.id = ("image").concat(i,",", j);
            image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png"; 
            image.className = "rs";
            innerDiv2.appendChild(image);
            document.body.appendChild(div);

            // Add onclick feature
            image.onclick = changeSquare;
        }
    }
};

GridTest.html

<head>
  <link rel="stylesheet" type="text/css" href="GridTest.css">
</head>

<body>
        <script src="GridTest.js">
        </script>
        <script>
            makeGrid(20, 20);
        </script>
</body>

displayPanel.html

<head>
  <link rel="stylesheet" type="text/css" href="GridTest.css">
</head>

<body>
        <script src="GridTest.js">
        </script>
        <script>
            printInfo();
        </script>
</body>

nestTest.html（这里是我创建iframe的地方）

<head>
  <link rel="stylesheet" type="text/css" href="GridTest.css">
  <script src = "GridTest.js"> </script>
</head>


<iframe id="frame1" scrolling="no" src="GridTest.html">
</iframe>

<iframe id="frame2" scrolling="no" src="displayPanel.html"></iframe>

CSS（可能没必要，但我还是会包括它）

.square {
    float:left;
    position: relative;
    width: 5%;
    padding-bottom: 2.8125%;
    background-color:#1E1E1E;
    overflow:hidden;
    outline: 1px solid #FFFFFF;
}

.whiteSquare {
    float:left;
    position: relative;
    width: 5%;
    padding-bottom: 2.8125%;
    background-color:#FFFFFF;
    overflow:hidden;
    outline: 1px solid #FFFFFF;
}

/*
 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
    */

.content {
    position:absolute;
    height:40%;
    width:47%;
    padding: 5% 26.5%;
    text-align:center;
}

.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #000000;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

Picture of current result.

Answer 1

在你的changeSquare方法中，尝试这样的事情：

var frame2 = $('#frame2', top.document) //Give you top level frame jQuery Object.

为了获得更多向后兼容性，您可以使用以下内容：

window.parent.$('#frame2')

或类似的东西没有jQuery：

window.parent.getElementById('#frame2')[attributeName]

一旦拥有了根iFrame对象，就可以继续进行常规的jQuery / DOM操作。

编辑：这是一个完全运行且经过测试的解决方案（Safari / Mac OS）。下面仅突出显示更改：

displayPanel.html：

<head>
  <link rel="stylesheet" type="text/css" href="GridTest.css">
</head>

<body>
        <script src="GridTest.js">
        </script>
        <script>
            printInfo();
        </script>
 <div id="label1"></div> <!--Added a div for displaying text -->
</body>

GridTest.js：

function changeSquare() {
    var image = document.getElementById(this.id);

    //First get a reference to the second frame document
    var secondFrameDocument = window.top.document.getElementById('frame2').contentWindow.document; 

    //Now set the value of the Div    
    secondFrameDocument.getElementById('label1').textContent=this.id;

    // If image is currently green square, change to red, and vice versa
    if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
        image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
    } else {
        image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
    }
    currentDisplay = this.id;
};

根据您的具体情况，您可能会遇到安全问题，尤其是Chrome。更好的解决方案是使用两个Div而不是iFrame。这是截图：

在iframe之间进行通信

1 个答案: