我想在网站上有一个预览窗口，用户可以在其中单击不同的按钮来更改布局和颜色。我这里也有更改宽度的代码。
到目前为止我都可以做到，但我想不出一种方法让他们相互交流。
例如，布局 1、2、3、4 是不同的 .html 文件，因此当用户单击其中一个时，会显示所选的布局。
每种颜色接受的颜色完全相同，有 4 种布局变化。这就是我被困的地方。
我需要一种方法，当选择一种颜色，然后选择布局时，布局始终是相同的颜色，直到它被更改。
这是我目前的代码。
function changeSize()
{document.getElementById("myframe").height="500";
document.getElementById("myframe").width="700";}
function changeSize2()
{document.getElementById("myframe").height="500";
document.getElementById("myframe").width="340";}
function changeLayout()
{document.getElementById("myframe").src="layout1/orange/index.html";}
function changeLayout2()
{document.getElementById("myframe").src="layout2/orange/index.html";}
function changeLayout3()
{document.getElementById("myframe").src="layout3/orange/index.html";}
function changeLayout4()
{document.getElementById("myframe").src="layout4/orange/index.html";}
function changeColorOrange()
{document.getElementById("myframe").src="layout1/orange/index.html";}
function changeColorGreen()
{document.getElementById("myframe").src="layout1/green/index.html";}
function changeColorRed()
{document.getElementById("myframe").src="layout1/red/index.html";}
function changeColorBlue()
{document.getElementById("myframe").src="layout1/blue/index.html";}
function changeColorPink()
{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>
<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>
最佳答案
您可以为布局分配一个变量，为颜色分配另一个变量。然后以此为基础构造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");
关于javascript - iFrame 与按钮通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18430829/