在iframe中只显示一个div（javascript，JQuery ...） [英] show only one div within an iframe (javascript, JQuery...)
问题描述
我和iframe是这样的：
< div id =testloadlogin>
< iframe src =../ security / login.aspxwidth =400height =500
scrolling =autoframeborder =1>
[您的用户代理不支持帧，或者当前配置
不显示帧。但是，您可以访问
< a href =../ security / login.aspx>相关文档。< / a>]
< / iframe>
< / div>
使用iframe加载的页面有一个名为loginInnerBox的div。我只想显示loginInnerBox及其中的所有内容。
关于如何做到这一点的任何想法？我正在考虑使用jquery或某种类型的javascript来移除iframe加载的页面上的所有内容，但不知道如何访问该内容...
只是为了清楚我希望我的页面上的所有内容都保持不变。我想要相当于说。$（'testloadlogin'）。load（'../security/login.aspx'#loginInnerBox）它只会得到loginInnerBox的html并将它放在testloadlogin div中。但是，我需要从iframe支持的其他页面进行后端处理，但不需要Jquery加载。
< body>
< div>
< / div> .......
< div class =AspNet-Loginid =ctl00_CLPMainContent_Login1>
< div id =loginInnerBox>
< div id =loginCreds>
< table>
< / table>
< / div>
< / div>
< / div>
< div>
< / div> ....
< / body>
您需要更多信息吗？
<
< div class =ui-corner-allid = RefRes>
< div id =testloadlogin>
< iframe onload =javascript：loadlogin（）id =loginiframesrc =../ security / login.aspx
scrolling =autoframeborder =1>
[您的用户代理不支持帧，或者当前配置
不显示帧。但是，您可以访问
< a href =../ security / login.aspx>相关文档。< / a>]
< / iframe>
< / div>
< / div>
< script type =text / javascript>
function loadlogin（）{
$（'< body> *'，this.contentWindow.document）.not（'＃ctl00_CLPMainContent_Login1'）。hide（）;
}
< / script>
使用jQuery，您不仅可以加载一个URL，但是该URL中的特定CSS选择器。这将是一个更清洁的方法。就像这样。
$（＃area）。load（something.html #content）;
通过 CSS技巧
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<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.
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...
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.
The markup of the page loaded by the iframe is
<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>
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.
$("#area").load("something.html #content");
Via CSS Tricks
这篇关于在iframe中只显示一个div（javascript，JQuery ...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
