使用jquery .hide隐藏iframe [英] Hide iframe using jquery .hide
问题描述
我正在从书签中创建iframe。 iframe有 id ='contentIframe'
I am creating an iframe from a bookmarklet. The iframe has id='contentIframe'
我希望能够从内部隐藏iframe所以我' m使用以下html& jquery代码：
I want to be able to hide the iframe from within so i'm using the following html & jquery code:
<button id="hide">hide</button>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#contentIframe").hide();
});
});
</script>
但是当我点击按钮时它什么都不做。
But when I click the button it simply does nothing.
此外，当iframe加载时，它从css文件加载，因此内部html的环绕声是一个名为modal的类...如果我在Chrome中检查这个类并手动设置显示：none; 这隐藏了iframe，这实际上是几个resons的首选解决方案所以我尝试：
Also, when the iframe loads it loads from a css file so the surround of the inner html is a class named modal... if I inspect this class in say Chrome and manually set display:none; this hides the iframe and this is actually a preferable solution for a couple of resons so i try:
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$(".modal").hide();
});
});
</script>
点击按钮时也无效...有什么想法吗？
This also has no effect when clicking the button... Any ideas?
注意：我只控制iframe，而不是外页，因为iframe用于从用户正在查看的页面收集数据
NOTE: I only have control of the iframe, not the outer page as the iframe is used to collect data from the page a user is viewing
推荐答案
在点击事件中尝试此操作：
try this in your click event:
$('#contentIframe', window.parent.document).hide();
如下所示：
父网页html：
<html>
<body>
<iframe id="contentIframe" src="frame.htm"></iframe>
</body>
</html>
frame.htm：
frame.htm:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body style="background-color:red;">
<button id="hide">hide</button>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$('#contentIframe', window.parent.document).hide();
});
});
</script>
</body>
</html>
这假设父网页和框架网页都是从同一个域提供的......
This assumes the parent web page and frame web page are both served from the same domain...
这篇关于使用jquery .hide隐藏iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
