个人中心
gpt4 book ai didi

javascript - iframe 之间通信

转载 作者：行者123 更新时间：2023-11-28 06:32:46 25 4
gpt4 key购买 nike

我正在尝试使用 iframe 做一些事情，但目前有点挣扎。基本上，我有一个生成正方形网格的脚本(下图)，我想这样做，以便当我单击正方形时，我会在不同的 iframe 中显示某些内容。

例如，假设我有第 1 帧(其中包含网格)和第 2 帧(这是“显示”帧)。如果我单击左上角的方 block ，那么我想在显示框中显示“index(0,0)”。如果我点击 (1, 1) 方 block ，那么我想显示“index(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;
        }
    }
};

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>

显示面板.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.

最佳答案

在你的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)。下面仅突出显示了更改:

显示面板.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。这是屏幕截图:enter image description here

关于javascript - iframe 之间通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34552430/

25 4 0
文章推荐： ios - Swift - Alamofire totalBytesExpectedToRead 返回 -1，即使设置了 Content-length
文章推荐： ios - 在显示之前操作推送通知 (APNS)
文章推荐： swift - Nimble - 期望等于 <0.9602>，得到 <0.9602>
文章推荐： javascript - js Canvas 堆叠顺序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com