2010-11-03 21 views
8

İlk önce tamamen farklı bir yaklaşımla ilgili fikirlere açık olduğumu söyleyeyim.iframe içinde sadece bir div göster (javascript, JQuery ...)

Ben ve iframe gibi: iframe loginInnerBox adında bir div sahip olan

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

sayfa yüklenirken. Sadece loginInnerBox ve içindeki her şeyi görüntülemek istiyorum.

Bunu nasıl yapacağınıza dair herhangi bir fikir var mı? Ben iframe tarafından yüklenen sayfadaki diğer her şeyi kaldırmak için Jquery veya javascript kullanarak düşünmüyordum, nasıl olsa erişmek için emin değilim ...

Sadece açık olmak gerekirse sayfamda her şeyi istiyorum iframe bozulmadan kalacaktır. Ben sadece loginInnerBox'ın html'sini alıp testloadlogin div'una yerleştiren $ ((testloadlogin)) yükünü yüklemek istiyorum ('../ security/login.aspx' #loginInnerBox). Bununla birlikte, iframe tarafından desteklenen, ancak Jquery yüküyle değil, diğer sayfadan arka uç işlemeye ihtiyacım var.

iframe'le yüklenen sayfamın biçimlendirme

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

Bundan daha fazla bilgi mi istiyorsunuz nedir? Bunu denedim

, hiçbir etkisi vardı:

<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

CSS Tricks Via anlamıyorum. "Sadece kutuyu göster" ile ne demek istiyorsun? Diğer içerikle ne yapmak istersin? Iframe dışındaki içeriklere ne dersiniz? –

+0

Üzgünüm. İçeriğin geri kalanı, iframe'I silmek istiyorum. İçeriği iframe DIŞINDA bozulmamış kalmak istiyorum. – kralco626

+0

iframe içine yüklenen sayfanın işaretlenmesine bağlı olarak, nasıl yapılacağını, bu yüzden lütfen işaretlemeyi gösterin. –

cevap

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

bu sadece aynı etki alanından yüklenen iframe'lerle üzerinde çalışacak unutmayın (same origin policy)

DÜZENLEME: Muhtemelen bu kaldırır loginInnerBox'un çocukları da. Bu durumda önce klonlamak deneyebilirsiniz: Böyle

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

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

Something ..

+0

Umarım aynı alandan olurlar. Onlar şimdi, sadece sitenin alanlarını değiştirmeyeceklerini umuyorlar. Şimdi test ediyorum. – kralco626

+0

hiçbir şey yapmadı. sadece iframe'deki tüm sayfayı daha önce olduğu gibi gösterir. – kralco626

+0

Hmm .. iframe'indekilerden herhangi bir şeyi kaldırabileceğinizi deneyin. "Kaldır" iframe'lerde çalışmazsa, $ (el) .hide() 'ye geçebilirsiniz. – pex

0

-elememt Bu ekleyin: vücudun her çocuğa gizler

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

# ctl00_CLPMainContent_Login1

# ctl00_CLPMainContent_Login1 oturum açma listesinden daha fazlasını içeriyorsa, öneriyi pex tarafından gönderilen clone() kullanarak kullanmanız gerekir.

+0

, böylece giriş kutusunun içinde div varsa ii klonunu kullanmak zorunda mıyım? Klon kullanılmadığı zaman klon kullanırken iframe'deki bir düğmeyi tıklattığımda aynı serer yan kodu çalıştırılacak mı? – kralco626

+0

javascript, sunucu koduna dikkat etmez ve diğer yandan sunucu javascript hakkında endişelenmez. –

5

jQuery ile, yalnızca bir URL'nin içeriğini değil, belirli bir CSS seçiciyi bu URL'nin içinden yükleyebilirsiniz. Bu çok daha temiz bir yaklaşım olurdu. Bunun gibi.

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

İlgili konular