javascript - Iframe 代码不再工作

标签 javascript jquery html css iframe

我刚才写了这段代码，它基本上是一个 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>

最佳答案

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

 $(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/

关于javascript - Iframe 代码不再工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23810383/

上一篇：css - 图片下的文字，我希望它不可见，但我希望能够找到它

下一篇：html - 对齐左元素以适应可用空间

相关文章：

javascript - 数组差异和更改时更新值

javascript - Accordion 按钮未隐藏文本

javascript - jQuery: For 循环 if else 和 nth-child

jquery按长度限制文本

html - 忽略父填充

html - 仅使用打印媒体查询将 div 放在最后一页

javascript - React/Redux URL 不匹配 : When the array item number differs from the object id

javascript - 着色器 : Best practice to store them

javascript - $.when().done() 在when完成之前触发done函数

javascript - JS - 如何从 HTML-span 中删除最后四个字符

©2024 IT工具网  联系我们