如何模糊iframe

How to blur an iframe?

本文关键字：iframe 模糊 何模糊      更新时间：2023-09-26

我使用JavaScript与HTML，我有一个页面，其中包括多个iframe。我希望能够模糊这些框架中的一些(而不是隐藏它们)，以便用户可以看到这些框架内的内容，但不能点击它们或在它们中输入。

有办法做到这一点吗?

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

您可能需要这样的内容: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;
}

我建议在每个"模糊"iFrame上定位一个透明的div，以防止时钟事件向下传播。据我所知，iFrame标签本身并没有提供您想要的功能。

不管它的价值是什么，在Web术语中，"模糊"指的是将文本光标移出控件!

下面是在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/

相关文章：