javascript - Iframe 代码不再工作

Question

我刚才写了这段代码，它基本上是一个 iframe 模块，它在一个 iframe 中显示 5 个不同的页面，每次你选择不同的选项时，iframe src 都会改变。这段代码曾经有效，我用了好几次。

但是现在，我已经几个月没用过这段代码了，现在我不得不再次使用它来做某事，但现在它不起作用了，而且我没有做任何更改...

基本上现在当 radio 被点击时没有任何反应......谁能帮我？为什么它不再起作用了？

代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){
console.log("document loaded");

function scrollTo(x,y){}

function ignoreerror()
{
   return true
}
window.onerror=ignoreerror();

$('#iframe1').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
       $('#span1').css('color','#ff0000');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 1;
});
$('#iframe2').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930    /vote/').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#ff0000');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 2;
});
$('#iframe3').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#ff0000');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 3;
});
$('#iframe4').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/servers42977').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 4;
});
$('#iframe5').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 5;
});
});


var iframeState = 1;

$(document).on('click','#back',function() {

  if (iframeState >= 2 && iframeState <= 5) {
    iframeState = iframeState - 1;
  } else {
    iframeState = 5;
  }
  iframeSelector();
});


$(document).on('click','#next',function() {

  if (iframeState >= 1 && iframeState <= 4) {
    iframeState = iframeState + 1;
  } else {
    iframeState = 1;
  }
  iframeSelector();
});

function iframeOne(){

$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
       $('#span1').css('color','#ff0000');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 1;
};

function iframeTwo(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930/vote/').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#ff0000');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 2;

};

function iframeThree(){

$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#ff0000');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 3;

};

function iframeFour(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/server-s42977').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 4;

};

function iframeFive(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 5;

};

function iframeSelector(){
switch(iframeState)
{
case 1:
  iframeOne();
  break;

case 2:
  iframeTwo();
  break;

case 3:
  iframeThree();
  break;

case 4:
  iframeFour();
  break;

case 5:
  iframeFive();
  break;

default:
  iframeState=1;
  iframeOne();
}
}
})

</script>

<div id="everything" style="background-color: rgba(0, 0, 0, 0.6);border:1px solid #000000;border-radius:10px;padding:10px;">
<div id="selectbox" align="center">
    <input id="iframe1" name="options" value="website1" type="radio">  
    <label for="iframe1"><span id="span1">MC Servers</span></label>  
    <input id="iframe2" name="options" value="website2" type="radio">  
    <label for="iframe2"><span id="span2">MineStatus</span></label>  
    <input id="iframe3" name="options" value="website3" type="radio">  
    <label for="iframe3"><span id="span3">MC Server List</span></label>  
    <input id="iframe4" name="options" value="website4" type="radio">  
    <label for="iframe4"><span id="span4">TopG</span></label>  
    <input id="iframe5" name="options" value="website5" type="radio">  
    <label for="iframe5"><span id="span5">Planet Minecraft</span></label>  
</div>

<div id="buttons" align="center">
<img id="back" src="http://files.enjin.com/444592/sd/back.png" alt="back">

<img id="next" src="http://files.enjin.com/444592/sd/next.png" alt="next">
</div>

<div id="iframes" align="center">
<iframe id="iframebox" seamless="" src="http://minecraft-mp.com/server-s42977" height="600px;" width="100%">
</iframe> 
</div>
</div>
<style>

#selectbox{
border:2px solid #080808;
border-radius:25px;
background:#dddddd;
overflow:hidden;
height:40px;
padding-top:5px;
opacity:0.95;
}

#span1, #span2, #span3, #span4, #span5{  
display: inline-block;  
cursor: pointer;  
position: relative;  
padding-left: 25px;  
padding-top: 6px;
margin-right: 30px;
font-size: 18px;
color:#050505;
font-weight:bold;
transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out; /* FF 4 */
-webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
-o-transition: color 1s ease-in-out; /* Opera */
}

#span1{
color:#ff0000;
}

input[type=radio]{  
display: none;  
}

.radio label:before {  
border-radius: 8px;  
}       

#iframes{
border:0px solid #080808;
border-radius:15px;
padding:10px;
}

#iframebox{
border:0px solid #080808;
border-radius:15px;
margin-left:0px;
transition: margin 1s ease-in-out;
-moz-transition: margin 1s ease-in-out; /* FF 4 */
-webkit-transition: margin 1s ease-in-out; /* Safari & Chrome */
-o-transition: margin 1s ease-in-out; /* Opera */
}

#back{
cursor: pointer; 
margin-top:10px;
margin-right:5px;
width:159;
height:60;
opacity:1;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}

#back:hover{
width:159;
height:60;
opacity:0.75;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}

#back:active{
width:159;
height:60;
opacity:1;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.2s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.2s ease-in-out; /* Opera */
}

#next{
cursor: pointer;
margin-top:10px;
margin-left:5px;
width:159;
height:60;
opacity:1;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}

#next:hover{
width:159;
height:60;
opacity:0.75;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}

#next:active{
width:159;
height:60;
opacity:1;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.2s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.2s ease-in-out; /* Opera */
}

</style>

Answer 1

根据我收集的信息，这应该可以解决您的问题:

 $(document).ready(function(){
console.log("document loaded");

function scrollTo(x,y){}

function ignoreerror()
{
   return true
}
window.onerror=ignoreerror();

$('#iframe1').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
       $('#span1').css('color','#ff0000');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 1;
});
$('#iframe2').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930    /vote/').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#ff0000');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 2;
});
$('#iframe3').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#ff0000');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 3;
});
$('#iframe4').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/servers42977').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 4;
});
$('#iframe5').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 5;
});



var iframeState = 1;

$(document).on('click','#back',function() {

  if (iframeState >= 2 && iframeState <= 5) {
    iframeState = iframeState - 1;
  } else {
    iframeState = 5;
  }
  iframeSelector();
});


$(document).on('click','#next',function() {

  if (iframeState >= 1 && iframeState <= 4) {
    iframeState = iframeState + 1;
  } else {
    iframeState = 1;
  }
  iframeSelector();
});

function iframeOne(){

$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
       $('#span1').css('color','#ff0000');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 1;
};

function iframeTwo(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930/vote/').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#ff0000');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 2;

};

function iframeThree(){

$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#ff0000');
       $('#span4').css('color','#080808');
       $('#span5').css('color','#080808');
iframeState = 3;

};

function iframeFour(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/server-s42977').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 4;

};

function iframeFive(){

$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
       $('#span1').css('color','#080808');
       $('#span2').css('color','#080808');
       $('#span3').css('color','#080808');
       $('#span4').css('color','#ff0000');
       $('#span5').css('color','#080808');
iframeState = 5;

};

function iframeSelector(){
switch(iframeState)
{
case 1:
  iframeOne();
  break;

case 2:
  iframeTwo();
  break;

case 3:
  iframeThree();
  break;

case 4:
  iframeFour();
  break;

case 5:
  iframeFive();
  break;

default:
  iframeState=1;
  iframeOne();
}
}
});

那里有一些额外的右括号。

这是页面工作的 fiddle :http://jsfiddle.net/sr2gw/