iFrame 与按钮通信答案

【问题标题】：iFrame communicating with buttonsiFrame 与按钮通信
【发布时间】：2013-08-25 15:51:15
【问题描述】：

我想在网站上设置一个预览窗口，用户可以在其中单击不同的按钮来更改布局和颜色。我这里也有代码来改变宽度。

到目前为止，我可以同时做到这两点，但我想不出一种方法让它们相互交流。

例如，布局 1、2、3、4 是不同的 .html 文件，因此当用户单击其中一个时，将显示所选布局。

对于每种颜色接受的颜色完全相同，有 4 种布局变化。这就是我卡住的地方。

I need a way that when a color is selected, then a layout, the layout is always that same color until it is changed.

这是我目前的代码。

函数更改大小（） {document.getElementById("myframe").height="500"; document.getElementById("myframe").width="700";} 函数 changeSize2() {document.getElementById("myframe").height="500"; document.getElementById("myframe").width="340";} 函数更改布局（） {document.getElementById("myframe").src="layout1/orange/index.html";} 函数 changeLayout2() {document.getElementById("myframe").src="layout2/orange/index.html";} 函数 changeLayout3() {document.getElementById("myframe").src="layout3/orange/index.html";} 函数 changeLayout4() {document.getElementById("myframe").src="layout4/orange/index.html";} 函数改变颜色橙色（） {document.getElementById("myframe").src="layout1/orange/index.html";} 函数改变颜色绿色（） {document.getElementById("myframe").src="layout1/green/index.html";} 函数改变颜色红色（） {document.getElementById("myframe").src="layout1/red/index.html";} 函数改变颜色蓝色（） {document.getElementById("myframe").src="layout1/blue/index.html";} 函数改变颜色粉红色（） {document.getElementById("myframe").src="layout1/pink/index.html";}

<body>
    <button type="button" onclick="changeSize()" width="20"><i class="icon-desktop icon-2x" style="color:#333;"></i></button>
    <button type="button" onclick="changeSize2()" width="20" style="background-color:#f2f2f2;border: 1px solid #d1d1d1;"><i class="icon-mobile-phone icon-2x" style="color:#333;"></i></button>
    &nbsp;
    <br />
    <br />
    <iframe id="myframe" src="layout1/orange/index.html" height="500" width="700">
    <p>Your browser does not support iframes.</p>
    </iframe>
    <br><br>

<h4>Layout</h4>
<input class="button2" type="button" onclick="changeLayout()" value="1">
<input class="button2" type="button" onclick="changeLayout2()" value="2">
<input class="button2" type="button" onclick="changeLayout3()" value="3">
<input class="button2" type="button" onclick="changeLayout4()" value="4">

<br />
<br />

<h4>Colors</h4>
<input class="button2" type="button" onclick="changeColorOrange()" value="Orange">
<input class="button2" type="button" onclick="changeColorGreen()" value="Green">
<input class="button2" type="button" onclick="changeColorRed()" value="Red">
<input class="button2" type="button" onclick="changeColorBlue()" value="Blue">
<input class="button2" type="button" onclick="changeColorPink()" value="Pink">

谁能指出我正确的方向？

谢谢你的疏忽。

编辑 - 英国下午 6:55

最新代码，

<script>
// set the default layout and color
window._layout = "layout1";
window._color = "red";

// this function makes changes
function frameChanger(layout,color) {
    layout = layout || window._layout;
    color = color || window._color;
    var frame = document.getElementById("myframe2");
    frame.src = "http://mydomain.com/templates/" + layout + "/" + color + "/index.html";
    window._layout = layout;
    window._color = color;
}


</script>

<body>


<iframe id="myframe2" height="500" width="720" style="margin:0 auto; display:block;">
<p>Your browser does not support iframes.</p>
</iframe>

<input class="button2" type="button" onclick="frameChanger('layout2','orange');">
<input class="button2" type="button" onclick="frameChanger('layout1','red');">

</body>

【问题讨论】：

那么四个布局都在一个iFrame中？还是各有各的？这些布局有多复杂？只是一些彩色盒子？可能有一个更简单的解决方案。
最好让类改变颜色和大小。
只有一个iframe，当一个按钮被点击时，它会变成html文件。希望这可以帮助。布局略有不同，它们是具有不同图像的不同布局的表格。
我认为您的主要问题是尝试访问框架中的 HTML 而不先直接进入框架。 window.frames documentation。然后，正如 Sergio 所说，您可以开始随时更改类名和颜色等等。

标签： javascript jquery html css iframe

【解决方案1】：

您可以为布局分配一个变量，为颜色分配另一个变量。然后在此基础上构造src。为简单起见，您可以使用一个函数来接受处理不同场景的参数，而不是使用大量函数来处理每种情况。

像这样：

// set the default layout and color
window._layout = "layout1";
window._color = "orange";

// this function makes changes
function frameChanger(layout,color) {
    layout = layout || window._layout;
    color = color || window._color;
    var frame = document.getElementById("myframe");
    frame.src = layout + "/" + color + "/index.html";
    window._layout = layout;
    window._color = color;
}

// change to red like this
frameChanger("","red");

// change to layout 3 like this:
frameChanger("layout3","");

// change to layout 2 with blue color like this:
frameChanger("layout2","blue");

【讨论】：

感谢您的回答，我想我理解这一点，但有一些小问题。我的 iframe url 在标准视图中看起来像这样，mydomain.com/wp/templates/layout2/orange/index.html 按钮应该是什么样子，像这样？ ?它似乎没有在切换 iframe src？
您必须小心转义引号。因此，如果您对 onclick 包装器使用双引号，则需要对函数的参数使用单引号。例如：<input class="button2" type="button" onclick="frameChanger('layout2','blue');">（请注意，我在 'layout' 和 'blue' 周围使用了单引号）。
哇，效果很好！谢谢你。我现在唯一的麻烦是加载初始 iframe 屏幕。请参阅我上面的代码。不知道为什么它不起作用，因为“layout1”和“red”都是有效的，因为当您单击第二个按钮时，它会显示正确的页面。
啊，我想明白你了。只需确保您的初始 <iframe> 是常规 HTML iframe。看看你怎么没有src 属性？所以，让它<iframe id="myframe2" height="500" width="720" style="margin:0 auto; display:block;" src="http://mydomain.com/templates/layout1/red/index.html"></iframe>
+1 ^ 这家伙！非常感谢你，伙计，你让我很开心，我学到了很多东西。你的贝宝是什么？我请你喝啤酒。

【解决方案2】：

听起来您希望子 iFrame 更改其位置，而您正试图将其更改为访问它的“src”属性。这样做似乎更好的方法是使用

window.frames

对象，并将 iFrame 设置为

window.location

到您想要的目的地。

另外，如果没有限制使用库，使用 HTML 模板，如把手、胡子或敲除 JS，我认为你可以更优雅地完成同样的事情。希望这会有所帮助！

【讨论】：