如何模糊iframe？

我在HTML中使用JavaScript，我有一個包含多個iframe的頁面。我希望能夠模糊一些這些iframse（不隱藏），以便用戶可以看到這些框架內的內容，但不能點擊它們或鍵入它們。如何模糊iframe？

有沒有辦法做到這一點？

2011-07-25 Bahar Narenj

我想你可以在iframe中使用透明覆蓋，並在父窗口用JS觸發它。 –

或半透明疊加，使內容失焦... – nnnnnn

像這樣的東西可能是你想要什麼：http://jsfiddle.net/Paulpro/xcWcn/1/

HTML：

<div id="frame1-blocker" class="frame-blocker"></div> 
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>

CSS：

.frame-blocker{ 
    background-color: rgba(0,0,0,0.5); 
    position: absolute; 
    width: 500px; 
    height: 300px; 
}

來源

2011-07-25 23:19:31 Paulpro

這是一個褪色，沒有模糊。 – NoBugs

我建議在每個「模糊」iFrame上放置一個透明的DIV，以防止時鐘事件向下傳播。 iFrame標籤本身並不提供您想要的功能。

對於它的價值，Web模糊中的「模糊」是指將文本光標移動到控件之外！

來源

2011-07-25 23:15:04

-1

下面是使用iframe中疊加的方式演示：

#hidden { 
    display: none; 
} 
iframe { 
    width: 200px; 
    height: 200px; 
} 
a { 
    color: #f00; 
    text-decoration: underline; 
    cursor: pointer; 
} 

<div> 
    <a class="activate" rel="1">Active Test 1</a><br/> 
    <a class="activate" rel="2">Active Test 2</a><br/> 
    <a class="activate" rel="3">Active Test 3</a> 
</div> 
<iframe id="test1"></iframe> 
<iframe id="test2"></iframe> 
<iframe id="test3"></iframe> 
<div id="hidden"> 
    <div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div> 
    <div> 
     <a href="http://www.yahoo.com/" target="_blank">http://www.yahoo.com/</a> 
    </div> 
</div> 

$('iframe').each(function(){ 
    $(this).contents().find('body').append($('#hidden').html()); 
}); 
$('div a.activate').click(function(){ 
    $('iframe[id^=test]').contents().find('#overlay') 
     .css('height','200px') 
     .css('width','200px') 
     .fadeTo('fast', 0.5); 
    $('iframe#test'+this.rel).contents().find('#overlay') 
     .css('height','0') 
     .css('width','0') 
     .fadeTo('fast', 1); 
});

http://jsfiddle.net/ZTpXa/

來源

2011-07-25 23:56:09

用jQuery回答了JavaScript問題。修復並發表評論，我會反轉我的投票。 – John

對。基於使用jQuery來回顧六年前的問題。你可以有你的downvote。 –

iframe.contents().find('body').blur()

來源

2012-04-02 12:21:35

如果iframe來自不同的來源，則不起作用 – luiges90

如何模糊iframe？

回答

相關問題