隐藏iframe中的内容?

时间:2015-05-14 08:31:16

标签: javascript jquery html css

这是我的情况。

我有一个名为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));

这是我的情况。

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

我非常困惑,感谢您的帮助。

5 个答案:

答案 0 :(得分:9)

您可以这样使用.contents()

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

另一件事是,因为您已将代码包装在一个闭包中,该闭包在页面响应进入浏览器时运行。因此,此代码更改可能无法正常工作。

相反,我建议你为此准备一个dom ready块:

(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));

答案 1 :(得分:1)

如果在iframe中加载的页面与父框架不在同一个域中,则无法使用JavaScript或CSS。

这是在Web浏览器上实现的一项安全功能,用于防止XSS(跨站点脚本)。

答案 2 :(得分:0)

你试过吗

@Override
public void start( Stage stage )
{

    BorderPane borderPane = new BorderPane();
    ToolBar toolbar = new ToolBar();
    toolbar.setStyle( "-fx-border-color: red" );

    toolbar.visibleProperty().bind( Bindings.isNotEmpty( toolbar.getItems() ) );

    HBox hbox = new HBox();
    borderPane.setLeft( toolbar );
    borderPane.setTop( hbox );

    Button add = new Button( "add" );
    add.setOnAction( ( ActionEvent event ) ->
    {
        toolbar.getItems().add( new Button( "dummy" ) );
    } );

    Button remove = new Button( "remove" );
    remove.setOnAction( ( ActionEvent event ) ->
    {
        toolbar.getItems().remove( 0 );
    } );

    hbox.getChildren().addAll( add, remove );

    final Scene scene = new Scene( borderPane, 800, 600 );
    stage.setScene( scene );
    stage.show();

}

修改 首先在iframe加载时获取事件,然后创建一个事件处理程序来捕获#sub div上的点击,最后在加载的iframe中找到红色并隐藏它

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

答案 3 :(得分:-1)

我已经尝试了上面的所有答案,但似乎没有任何效果,但我发现了这样的方式:

将iframe放入div中并在点击

时隐藏它
<!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文件放在身体外,您可以将其放入身体标签或头部,就像我一样

答案 4 :(得分:-3)

您无法隐藏iframe本身的内容,但您可以通过更改src隐藏iframe,如下所示:

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