Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 628
kralco626 Avatar asked Nov 03 '10 12:11

kralco626


People also ask

How can I get specific area in iframe?

If you want to display specific area of external website using iframe, then you will learn in this article how to embed a specific part of a web page using css. Suppose, you want to show only one div element from another website and want to hide some specific content, then you can easily do this using <iframe> tag.

Can you put a div inside an iframe?

Approach 1: For adding additional div's in an iframe, you need to use a wrapper div, that wraps the contents of your intended div and the iframe into one unit. This way you can display the contents of your div along with the iframe embedding to the document/webpage.

Can I get element inside iframe?

Getting the element in IframegetElementById() method by passing iframe id as an argument. const iframe = document. getElementById("myIframe"); Now, it has and contentWindow property which returns the document object by using that we can access the elements from an Iframe.

Can you use jQuery in an iframe?

You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the . page element within the frame to white.


2 Answers

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

like image 155
Gourneau Avatar answered Oct 20 '22 03:10

Gourneau


$("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..

like image 45
pex Avatar answered Oct 20 '22 03:10

pex