iFrame与按钮通信

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

到目前为止，我可以做到这两点，但我想不出一种方法来让他们相互沟通。

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

任何人都可以点我这个方向是正确的？

谢谢inadvanced。

编辑 - 6:55 PM英国

最新的代码，

<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>

来源

2013-08-25 user282076

所以四种布局，都在一个单一的iFrame？或者每个都在自己的？这些布局有多复杂？只是一些彩色的盒子？可能有一个更简单的解决方案。 – DevlshOne

最好的办法是让课程改变颜色和尺寸。 – Sergio

有一个iframe，当单击一个按钮时，它将其更改为html文件。希望这可以帮助。布局略有不同，它们是具有不同图像的不同布局的表格。 – user282076

您可以为布局分配变量，为颜色分配另一个变量。然后在此基础上构建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-25 16:14:53 jonaz

感谢您的回答，我想我理解这一点，但有一些小问题。我的iframe网址看起来像这样的标准视图，http：//mydomain.com/wp/templates/layout2/orange/index.html 按钮应该看起来像这样吗？？它似乎并没有切换iframe src？ – user282076

你必须小心逃避引号。所以，如果你使用双引号作为onclick包装器，你需要为函数的参数使用单引号。例如：''（注意我围绕'layout'和'blue'使用单引号）。 – jonaz

哇，这太棒了！谢谢。我现在唯一的麻烦是加载最初的iframe屏幕。请参阅上面的代码。不确定为什么它不起作用，因为'layout1'和'red'都是有效的，因为当你点击第二个按钮时它显示正确的页面。 – user282076

这听起来像你希望孩子iframe来改变自己的位置，你正在试图改变访问它的“源”属性。这似乎是更好的方式来做到这一点，是使用

window.frames

对象，并有内嵌框架设置它的

window.location

到你想要的目的地。另外，如果没有限制使用库，使用HTML模板（如把手，小胡子或knockoutJS），我认为你可以用更高雅一点来完成同样的事情。希望这可以帮助！

来源

2013-08-25 16:07:26 thebringking

iFrame与按钮通信

回答

相关问题