Question

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

到目前为止，我可以做到这两点，但我想不出让他们彼此沟通的方法。

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

Answer 1

听起来你希望孩子iFrames改变他们的位置，你试图改变它来访问它的“src”属性。这似乎是更好的方法，就是使用

window.frames

对象，让iFrame设置为

window.location

到你想要的目的地。

另外，如果使用库没有限制，使用像把手，小胡子或者敲门的HTML模板，我认为你可以用更优雅的方式完成同样的事情。希望这有帮助！

Answer 2

您可以为布局指定变量，为颜色指定另一个变量。然后基于此构造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与按钮通信

2 个答案: