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", "");	//控件恢复显示