show only one div within an iframe (javascript, JQuery…)

Question

First just let me say I\'m open to ideas on a different approach altogether.

I have and iframe as such:

      

        
                      

              相关标签:
       
      

Answer 1

$("iframe").contents().find("*:not(#loginInnerBox)").remove();

Be aware this would only work on iframes loaded from the same domain (same origin policy)

EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:

var iframe   = $("iframe").contents(),
    loginBox = iframe.find("#loginInnerBox").clone();

iframe.find("*").remove();
iframe.append(loginBox);

Something like that..

Answer 2

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

Answer 3

Add this to the <iframe>-elememt:

onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"

it will hide every child of the body except #ctl00_CLPMainContent_Login1

If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.