Javascript iframe之间的通信_Javascript_Html_Css_Iframe

Javascript iframe之间的通信

javascript html css iframe

Javascript iframe之间的通信,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我正在尝试用iframes做一些事情，现在有点挣扎。基本上，我有一个生成正方形网格的脚本（下图），我想让它在我点击一个正方形时，在不同的iframe中显示一些东西例如，假设我有第1帧（包含网格）和第2帧（这是“显示”帧）。如果单击左上角的方框，则希望在显示框中显示“索引（0,0）”。如果我单击（1，1）正方形，那么我想显示“索引（1，1）”等等我已经知道如何在同一帧中执行此操作（即，如果单击第1帧中的一个正方形，我可以在第1帧中显示“index（0,0）”），但我对如何在单独的帧中执行此操作

我正在尝试用iframes做一些事情，现在有点挣扎。基本上，我有一个生成正方形网格的脚本（下图），我想让它在我点击一个正方形时，在不同的iframe中显示一些东西

例如，假设我有第1帧（包含网格）和第2帧（这是“显示”帧）。如果单击左上角的方框，则希望在显示框中显示“索引（0,0）”。如果我单击（1，1）正方形，那么我想显示“索引（1，1）”等等

我已经知道如何在同一帧中执行此操作（即，如果单击第1帧中的一个正方形，我可以在第1帧中显示“index（0,0）”），但我对如何在单独的帧中执行此操作感到困惑。我试过很多方法，但似乎都不管用

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

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;
        }
    }
};

在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>

根据具体情况，您可能会遇到安全问题，尤其是使用Chrome时。更好的解决方案可能是使用两个div而不是iframe。

下面是一个屏幕截图：

在您的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>

根据具体情况，您可能会遇到安全问题，尤其是使用Chrome时。更好的解决方案可能是使用两个div而不是iframe。

下面是一个屏幕截图：

为什么要引用自己的代码？为什么不正常加载呢？我认为最好使用iframe来更轻松地布局，因为我创建网格的方式使得正常布局有点困难。我想将网格嵌套在一个更大的结构中（如果这有意义的话），我认为这是最好的方法。不过，我开始认为可能不是。对于iFrame之间的通信，请使用

postMessage

api。@RohanShankar我认为您应该看看Twitter的引导框架或其他布局。使用iFrame进行页面布局会给您带来很多额外的工作（如本问题所示），根本不需要，更不用说强制用户对iFrame资源发出额外HTTP请求的性能影响了。@Matthew谢谢，我会研究它！你为什么要使用自己的代码？为什么不正常加载呢？我认为最好使用iframe来更轻松地布局，因为我创建网格的方式使得正常布局有点困难。我想将网格嵌套在一个更大的结构中（如果这有意义的话），我认为这是最好的方法。不过，我开始认为可能不是。对于iFrame之间的通信，请使用

postMessage

api。@RohanShankar我认为您应该看看Twitter的引导框架或其他布局。使用iFrame进行页面布局会给您带来很多额外的工作（如本问题所示），根本不需要，更不用说强制用户对iFrame资源发出额外HTTP请求的性能影响了。@Matthew谢谢，我会研究它！谢谢你的回答！比如window.parent.GetElementById（“frame2”）.innerHTML=“some value”；工作？非常感谢！现在可以了。不过就像你说的，我在Chrome上遇到了问题。有办法解决这个问题吗？不管怎样，我真的很感激你的帮助：）我很高兴能帮上忙。尝试从node.js express或apache web服务器等服务器运行代码。Chrome不喜欢从本地文件系统提供文件。如果您从web服务器运行它，它可能会工作。有关详细信息，请检查此线程：。您使用的是什么平台/框架？谢谢您的回答！比如window.parent.GetElementById（“frame2”）.innerHTML=“some value”；工作？非常感谢！现在可以了。不过就像你说的，我在Chrome上遇到了问题。有办法解决这个问题吗？不管怎样，我真的很感激你的帮助：）我很高兴能帮上忙。尝试从node.js express或apache web服务器等服务器运行代码。Chrome不喜欢从本地文件系统提供文件。如果您从web服务器运行它，它可能会工作。有关详细信息，请检查此线程：。您使用的是什么平台/框架？

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;
};