隐藏iframe内的内容？

问题描述：

我有一个名为iframe.html的文件。其中有代码在下面，

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

     <script src="js/jquery-1.11.0.js" type="text/javascript"></script> 
    </head> 

    <body> 

     <iframe id="abc" src="test.html"></iframe> 
     <div id="sub">click</div> 
    </body> 

    <script src="js/script-22.js" type="text/javascript"></script> 
</html>

和我有test.html文件。其中有代码在下面，

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

    </head> 

    <body> 

     <div id="red">prasanga karunanayake </div> 
    </body> 


</html>

这里是js代码什么我都试过了，

(function($){ 

    var fire = { 
     init:function(){ 
      $('#sub') 
      .on('click', function(){ 
       $('#red', parent.document).css('display','none'); 
      }); 
     } 
    }; 
    fire.init(); 

}(jQuery));

这里是我的情况。

我需要隐藏<div id="red">prasanga karunanayake </div>它位于test.html文件中。如果我点击<div id="sub">click</div>然后隐藏test.html中的html内容。

我很困惑，你的帮助表示赞赏。

我怀疑隐藏的iframe本身是不可能的？ –

你的意思是你需要隐藏'

prasanga karunanayake

'点击'

click

'而没有别的？ –

试试这个$（'＃red'，window.parent.document）.css（'display'，'none'）; – talsibony

答

你试过

$('#sub') 
    .on('click', function(){ 
     $('iframe #red').css('display','none'); 
    });

编辑首先获取事件时的iframe加载，然后创建一个事件处理程序捕获到#sub DIV点击，终于发现在加载IFRAME红和隐藏

$(function(){ 
      var f=$('#abc') 
      f.load(function(){ 
        $("#sub").click(function(){ 
        f.contents().find('#red').hide(); 
        }); 

      }) 
     })

看到编辑答案 – Lukesoft

谢谢你的答案，但这里是我需要隐藏的HTML内容的东西。如果我点击div。 – Prasanga

对不起，检查编辑 – Lukesoft

答

无法隐藏什么在iframe本身，而是可以通过更改SRC，像这样隐藏的iframe：

$('#sub') 
     .on('click', function(){ 
      $('#abc').attr('src',''); 
     });

答

您可以使用.contents()这样：

$('#abc').contents().find('#red').hide();

另一件事是，当你已经包裹在它运行的页面响应获取浏览器的关闭你的代码。因此，这种代码更改可能无法工作。

相反，我建议你把一个DOM准备块也是这样：

(function($){ 
    $(function(){ // <---add this block from here to 
     var fire = { 
     init:function(){ 
      $('#sub').on('click', function(){ 
       $('#abc').contents().find('#red').hide(); 
      }); 
     } 
     }; 
     fire.init(); 
    }); //<----here 
}(jQuery));

谢谢。加工。 – Prasanga

答

我已经尝试了所有的答案以上，但没有什么似乎工作，但我发现这样的方式：

放一个div内的iframe，并隐藏在点击

<!DOCTYPE html> 
<html lang="eng"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>Pluign Development</title> 

     <script src="jquery-1.11.3.min.js" type="text/javascript"></script> 
     <script src="js.js" type="text/javascript"></script> 
    </head> 

    <body> 
     <div class="toHide"> 
      <iframe id="abc" src="test.html"></iframe> 
     </div> 
     <div id="sub">click</div> 

    </body> 


</html>

并隐藏它的代码是：

$(document).ready(function(e) { 
    $('#sub').click(function(){ 
     $(".toHide").html(''); 
    }); 

    $('#sub').click(); 
});

或

$(document).ready(function(e) { 
    $('#sub').click(function(){ 
     $(".toHide").css({"display":"none"}); 
    }); 

    $('#sub').click(); 
});

也请注意，你把JS文件在身体之外，你可以把它的body标签内或像我一样

答

头如果里面加载页面iframe与父框架不在同一个域中，那么使用JavaScript或CSS是不可能的。

这是在Web浏览器上实施的一项安全功能，用于防止XSS（跨站点脚本）。

隐藏iframe内的内容？

相关推荐