Javascript 隐藏 iframe 内的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30232738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide content inside iframe?
提问by Prasanga
Here is my situation.
这是我的情况。
I have a file called iframe.html. which has code in below,
我有一个名为 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>
and i have test.html file. which has code in below,
我有 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>
here is js code what i have tried,
这是我尝试过的js代码，
(function($){
var fire = {
init:function(){
$('#sub')
.on('click', function(){
$('#red', parent.document).css('display','none');
});
}
};
fire.init();
}(jQuery));
Here is my situation.
这是我的情况。
i need to hide <div id="red">prasanga karunanayake </div>which is in the test.html file. if i click <div id="sub">click</div>then hide html content which is in the test.html.
我需要隐藏<div id="red">prasanga karunanayake </div>test.html 文件中的内容。如果我单击<div id="sub">click</div>然后隐藏 test.html 中的 html 内容。
I am pretty much confused,Your help is appreciated.
我很困惑，感谢您的帮助。
回答by Jai
You can use .contents()this way:
你可以这样使用.contents()：
$('#abc').contents().find('#red').hide();
Another thing is, As you have wrapped your code in a closure which runs as page response gets in the browser. So it might be possible that this code change would not work.
另一件事是，因为您将代码包装在一个闭包中，该闭包在浏览器中获取页面响应时运行。因此，此代码更改可能不起作用。
Instead i suggest you to put a dom ready block also for this:
相反，我建议您为此也放置一个 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));
回答by Lukesoft
Have you tried
你有没有尝试过
$('#sub')
.on('click', function(){
$('iframe #red').css('display','none');
});
EDITFirst fetch the event when the iframe has loaded, then create an event handler to capture clicks on the #sub div, and finally find red in the loaded iframe and hide it
编辑首先在iframe加载时获取事件，然后创建一个事件处理程序来捕获#sub div上的点击，最后在加载的iframe中找到红色并隐藏它
$(function(){
var f=$('#abc')
f.load(function(){
$("#sub").click(function(){
f.contents().find('#red').hide();
});
})
})
回答by Minh Nh?t Phan
If the page loaded inside the iframe is not in the same domain as the parent frame, then it's not possible using JavaScript or CSS.
如果在 iframe 中加载的页面与父框架不在同一个域中，则无法使用 JavaScript 或 CSS。
This is a security feature implemented on web browsers to prevent XSS (Cross site scripting).
这是在 Web 浏览器上实施的一项安全功能，可防止 XSS（跨站点脚本）。
回答by Emad Morris Zedan
I have tried all the answers above but nothing seem to work but I found a way like this:
我已经尝试了上面的所有答案，但似乎没有任何效果，但我找到了这样的方法：
put the iframe inside a div and hide it on click
将 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>
and the code to hide it is:
隐藏它的代码是：
$(document).ready(function(e) {
$('#sub').click(function(){
$(".toHide").html('');
});
$('#sub').click();
});
or
或者
$(document).ready(function(e) {
$('#sub').click(function(){
$(".toHide").css({"display":"none"});
});
$('#sub').click();
});
also please notice that you are putting the JS file outside the body, you can put it inside the body tag or in the head as i did
还请注意，您将 JS 文件放在正文之外，您可以像我一样将其放在正文标签中或头部中
回答by Darren Sweeney
You can't hide what's in the iframe per se but you can hide the iframe by changing the src, like this:
您无法隐藏 iframe 本身的内容，但您可以通过更改 src 来隐藏 iframe，如下所示：
$('#sub')
.on('click', function(){
$('#abc').attr('src','');
});
