使用jquery隱藏iframe .hide

我從書籤創建iframe。 iframe的有id='contentIframe'使用jquery隱藏iframe .hide

我希望能夠從內部所以我用下面的HTML & jQuery代碼隱藏的iframe：

<button id="hide">hide</button> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#hide").click(function() { 
     $("#contentIframe").hide(); 
    }); 
}); 
</script>

但是，當我點擊按鈕，它只是什麼都不做。

此外，當iframe加載它從一個css文件加載，所以內部html的環繞是一個名爲模態的類...如果我檢查這個類，說鉻和手動設置display:none;這隱藏iframe，這是實際上是一對夫婦resons的最好的解決方案，所以我嘗試：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#hide").click(function() { 
     $(".modal").hide(); 
    }); 
}); 
</script>

單擊按鈕時...任何想法這也沒有影響？

注：我只有iframe的控制，而不是外部頁面的iframe被用來從頁面收集數據的用戶正在查看

來源

2012-09-19 Darren Sweeney

您所要求的位於在頁面中嵌入的腳本訪問外部頁面的DOM的iframe？ – thatidiotguy

在hide（）函數之前放置alert（「hi」），然後單擊#hide - 看看它是否提醒你 –

我相信問題是嵌入式頁面可以訪問父級的DOM來隱藏自己 –

您列出的代碼內嵌框架內運行（我認爲）。因此，它無法看到外部頁面的DOM，因此無法識別contentIFrame或.modal

我相信外部頁面中的腳本可以引用iFrame中的元素，因此您可以嘗試移動代碼到外部網頁...

來源

2012-09-19 16:00:58

這是正確的......我只控制iframe，而不是外部頁面，因爲iframe用於從用戶正在查看的頁面收集數據 –

試試這個在您的單擊事件：

$('#contentIframe', window.parent.document).hide();

像這樣：

父網頁的html：

<html> 
    <body> 
     <iframe id="contentIframe" src="frame.htm"></iframe> 
    </body> 
</html>

frame.htm：

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
    </head> 
    <body style="background-color:red;"> 
     <button id="hide">hide</button> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#hide").click(function() { 
        $('#contentIframe', window.parent.document).hide(); 
       }); 
      }); 
     </script> 
    </body> 
</html>

這是假設父網頁和框架網頁均來自同一個域提供...

來源

2012-09-19 16:08:19

謝謝，但那不起作用。恐怕。什麼都沒發生。 –

嗯我做了一個快速測試，它似乎工作，將用完整代碼更新我的答案 –

我只控制iframe，而不是外部頁面，因爲iframe用於從用戶正在查看的頁面收集數據 - 對不起，應該說在OP中，將會修改 - 非常感謝您的幫助 –

使用jquery隱藏iframe .hide

回答

相關問題