这是我的情况。
我有一个名为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内容。
我非常困惑,感谢您的帮助。
答案 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','');
});