11.4 隐藏/恢复显示问题

11.4.1 隐藏/恢复显示的js

假如页面的插件为:

    <div id="div1" style="position:relative;width:96%;height:400px">
        <script>insertReport('AF', '')</script>
    </div>

js 操纵插件, 让其隐藏/恢复显示, 通常有 2 种书写方法:
方法一: 修改 display 属性

    var dv = document.getElementById("div1");
    dv.style.display = 'block';		//隐藏
    dv.style.display = 'none';		//显示

    //对应到 jquery 是:
    $("#div1").hide();			//隐藏
    $("#div1").show();			//显示

方法二: 修改 visibility 属性

    var dv = document.getElementById("div1");
    dv.style.visibility = 'hidden';		//隐藏
    dv.style.visibility = 'visible';	//显示

    //对应到 jquery 是:
    $("#div1").css('visibility','hidden');			//隐藏
    $("#div1").css('visibility','visible');			//显示

这 2 种方法对页面 div 的布局影响是有差异的, 但这不在本文档的讨论范围.
本文档将列举不同浏览器下, 这些方法对 div 内插件的影响.

11.4.2 IE浏览器

在 IE 浏览器中, 上述 2 种方法的表现都能和你预期的完全一致, div 作为容器, 隐藏/显示动作直接影响到插件。
换句话说, IE 浏览器下插件的隐藏/显示问题最少。

11.4.3 npapi 插件

在国产浏览器的极速模式、Firefox浏览器、以及老版本的 Chrome 浏览器中，硕正插件是以 npapi 协议和浏览器内核交互的, npapi 模式的隐藏/显示和 IE 有所不同, 结论为：
1. 采用方法一 (修改 display) , 当隐藏时 (即置 div 的 display 为 'block'), 插件将被销毁, 当显示时 (即置 div 的 display 为 'none'), 插件将被重新创建, 重新创建时，它将触发 OnReady( ) 事件;
2. 方法二 (修改 visibility) 的结果与您的预期一致, 同 IE 浏览器;

11.4.4 ppapi 插件

目前主流版本的 Chrome 浏览器, 和硕正插件之间是以 ppapi 协议交互的, ppapi 模式的隐藏/显示和 上述浏览器也有所不同, 结论为：
1. 采用方法一 (修改 display) , 同 npapi, 插件会被销毁/重建;
2. 方法二 (修改 visibility) 对插件失效, 插件不会隐藏, 但是通过书写一句 js, 可以实现插件的隐藏/显示, 脚本如下:

    $("#div1").css('visibility','hidden');	//div隐藏
    AF.func("GrayWindow", "true");	//控件隐藏

全局函数 GrayWindow 本来是用于隐藏插件、让 div 呈现半透明效果的, 但此时 div 已经隐藏, 所以也没什么半透明效果了, 其整体效果就是插件隐藏.
插件恢复显示的 js 为:

    $("#div1").css('visibility','visible');	//div隐藏
    AF.func("GrayWindow", "");	//控件恢复显示