在 iframe 中只显示一个 div（javascript、JQuery...）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4086876/
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
show only one div within an iframe (javascript, JQuery...)
提问by kralco626
First just let me say I'm open to ideas on a different approach altogether.
首先让我说我对完全不同的方法持开放态度。
I have and iframe as such:
我有和 iframe 这样的：
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<a href="../security/login.aspx">the related document.</a>]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
使用 iframe 加载的页面有一个名为 loginInnerBox 的 div。我只想显示 loginInnerBox 及其内部的所有内容。
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
关于如何做到这一点的任何想法？我正在考虑使用 Jquery 或某种 javascript 来删除 iframe 加载的页面上的所有其他内容，但不知道如何访问它...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
为了清楚起见，我希望 iframe 之外的页面上的所有内容都保持完整。我想要相当于说 $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) 这只会获取 loginInnerBox 的 html 并将其放在 testloadlogin div 中。但是，我需要来自 iframe 支持的其他页面的后端处理，而不是 Jquery 负载。
The markup of the page loaded by the iframe is
iframe 加载的页面的标记是
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
您需要更多信息吗？
I tried this, it had no effect:
我试过了，没有效果：
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<a href="../security/login.aspx">the related document.</a>]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
回答by Gourneau
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
使用 jQuery，您不仅可以加载 URL 的内容，还可以加载该 URL 中的特定 CSS 选择器。这将是一种更清洁的方法。就像这样。
$("#area").load("something.html #content");
Via CSS Tricks
通过CSS 技巧
回答by pex
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
请注意，这仅适用于从同一域加载的 iframe（同源策略）
EDIT: Probably this removes children of loginInnerBoxas well. In that case you could try to clone it before:
编辑：可能这也删除了孩子loginInnerBox。在这种情况下，您可以尝试先克隆它：
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
类似的东西..
回答by Dr.Molle
Add this to the <iframe>-elememt:
将此添加到<iframe>-element：
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
它将隐藏除 #ctl00_CLPMainContent_Login1 之外的所有身体孩子
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.
如果#ctl00_CLPMainContent_Login1 包含的不仅仅是登录框，您必须使用 pex 发布的使用 clone() 的建议。
