0

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

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

例如，布局 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>
4

2 回答 2

0

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

窗口框架

对象，并设置 iFrame

窗口位置

到你想要的目的地。

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

于 2013-08-25T16:07:26.500 回答
0

您可以为布局分配一个变量，为颜色分配另一个变量。然后在此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");
于 2013-08-25T16:14:53.790 回答