我试过没有运气四处寻找。我有一个按钮组,一旦点击就会填充另一个按钮组。第二组按钮用于根据单击的按钮填充iframe。但是,iframe不会填充。我错过了什么?
我还试图弄清楚如何在我选择顶部的新按钮时隐藏其他按钮的选择。如果我点击“汽车”,它将显示第二组按钮。如果我点击“部件号”,它仍将保持“汽车”按钮组,并显示“部件号”按钮组。
window.onload = function()
{
document.getElementById('model1').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<body>
<div class="mpi-options btn-group-md">
<button type="button" class="mpi-box1" id="mpi-box1" value='hide/show' onclick="button1function('model1')">CAR</button>
</div>
<form id="model1" class="taskList" style="display:none" onchange="showhide(this)">
<input type = "button" value="What is my car's color?"/>
</form>
<div class="answer1 answers" style="width:100%;height:500px;display:none">
<div id="model1">Please enter search information</div>
<iframe src="https://www.chevrolet.com/"
width="100%" height="500" style="border-color:#666666" id="myiframe" allowfullscreen></iframe>
<iframe src="https://www.ford.com/"
width="100%" height="500" style="border-color:#666666" id="myiframe1" allowfullscreen></iframe>
</div>
</body>
JS:
window.onload = function()
{
document.getElementById('model1').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
HTML:
<body>
<div class="mpi-options btn-group-md">
<button type="button" class="mpi-box1" id="mpi-box1" value='hide/show'
onclick="button1function('model1')">CAR</button>
</div>
<form id="model1" class="taskList" style="display:none"
onchange="showhide(this)">
<input type = "button" value="What is my car's color?"/>
</form>
<div class="answer1 answers" style="width:100%;height:500px;display:none">
<div id="1">Please enter search information</div>
<iframe src="https://www.chevrolet.com/"
width="100%" height="500" style="border-color:#666666"
id="myiframe" allowfullscreen></iframe>
<iframe src="https://www.ford.com/"
width="100%" height="500" style="border-color:#666666"
id="myiframe1" allowfullscreen></iframe>
</div>
</body>
我说问题是您尝试加载到iFrame中的网址。这是一个特殊的设置,可以防止特定网站在iFrame中显示。如果你看一下控制台,你会看到以下错误信息:
Load denied by X-Frame-Options: https://www.toyota.com/ does not permit cross-origin framing.
因此,您永远不会在iFrame中看到丰田的网站。尝试将其替换为驻留在您自己的网络服务器上的内容。