2010-11-03 25 views
8

Primero déjame decir que estoy abierto a las ideas sobre un enfoque diferente.muestra solo un div dentro de un iframe (javascript, JQuery ...)

tengo y iframe como tal:

<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> 

La página se está cargando con el iframe tiene un div llamado loginInnerBox. Solo quiero mostrar el loginInnerBox y todo lo que hay dentro de él.

¿Alguna idea sobre cómo hacer esto? Estaba pensando en usar Jquery o javascript de algún tipo para eliminar todo lo demás en la página cargada por el iframe, no estoy seguro de cómo acceder a eso ...

Para que quede claro, quiero todo lo que esté en mi página fuera del iframe para permanecer intacto. Quiero el equivalente a decir $. ('Testloadlogin'). Load ('../ security/login.aspx' #loginInnerBox) que simplemente obtendría loginInnerBox's html y lo colocaría en el testloadlogin div. Sin embargo, necesito el procesamiento de back-end desde la otra página que es compatible con iframe, pero no con la carga de Jquery.

El marcado de la página cargada por el marco flotante es

<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> 

¿Necesita más información que eso?

He intentado esto, que no tuvo efecto:

<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> 
+0

que no entiendo. ¿A qué te refieres con "solo mostrar la caja"? ¿Qué quieres que suceda con el otro contenido? ¿Qué pasa con el contenido fuera del iframe? –

+0

Lo siento. El resto del contenido DENTRO del iframe quiero desaparecer. El contenido FUERA del iframe quiero permanecer intacto. – kralco626

+0

Depende del marcado de la página cargada dentro del iframe, cómo hacerlo, así que por favor muestre el marcado. –

Respuesta

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

en cuenta que esto sólo funcionaría en marcos flotantes cargados desde el mismo dominio (same origin policy)

EDIT: Probablemente esto elimina hijos de loginInnerBox también. En ese caso, usted podría tratar de clonar antes:

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

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

Algo por el estilo ..

+0

con suerte, serán del mismo dominio. Están justo ahora, solo espero que no cambien los dominios del sitio. Estoy probando ahora. – kralco626

+0

no hizo nada. solo muestra toda la página en el iframe como antes. – kralco626

+0

Hmm .. Intente si puede eliminar algo del contenido del iframe. Si 'remove' no funciona en iframes, puede cambiar a' $ (el) .hide() '? – pex

0

añadir esto a la -elememt:

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

se ocultará todos los niños del cuerpo excepto # ctl00_CLPMainContent_Login1

Si # ctl00_CLPMainContent_Login1 contiene más que el loginbox, debe usar la sugerencia usando clone() publicado por pex.

+0

entonces si hay divisiones dentro del loginbox tendré que usar clone? ¿se ejecutará el mismo código del lado del seridor cuando hago clic en un botón en el iframe cuando uso el clon como cuando no uso el clon? – kralco626

+0

javascript no se preocupa por el código del servidor, y por otro lado, al servidor no le importa javascript. –

5

Con jQuery, puede cargar no solo el contenido de una URL, sino también un selector de CSS específico desde esa URL. Este sería un enfoque mucho más limpio. Es como esto.

$("#area").load("something.html #content"); 

Via CSS Tricks

Cuestiones relacionadas