1. 程式人生 > >PPAPI插件的動態創建、改動、刪除

PPAPI插件的動態創建、改動、刪除

ring each pos down char 邏輯 ner 尺寸 restore

一旦你完畢了PPAPI插件的開發,實際使用時可能會有下列需求:

  • 動態創建PPAPI插件
  • 刪除PPAPI插件
  • 改變PPAPI插件的尺寸

實現起來非常easy,從JS裏直接訪問DOM(BOM)就可以。以下是一個演示樣例HTML文件:

<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2016 [email protected](programmer_sight). 
  All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
    <style type="text/css">

    #pluginContainer
    {
        padding: 0px;
        width: 1220px;
        height: 540px;
        background-color: gray;
    }   
    </style>
    <script type="text/javascript">
      function createPlugin() {
        var plugin = document.createElement("embed");
        plugin.setAttribute("id", "explugin");
        plugin.setAttribute("type", "application/x-ppapi-example");
        plugin.setAttribute("width", "1200px");
        plugin.setAttribute("height", "520px");

        var container = document.getElementById("pluginContainer");
        container.appendChild(plugin);
      }
      function deletePlugin(){
        var container = document.getElementById("pluginContainer");
        var plugins = container.getElementsByTagName("embed");
        if(plugins.length >= 1){
          container.removeChild(plugins[0]);
        }
      }
      function changeSize() {
        var plugin = document.getElementById("examplePlugin");
        plugin.setAttribute("width", "600px");
        plugin.setAttribute("height", "300px");
      }
      function restoreSize() {
        var plugin = document.getElementById("examplePlugin");
        plugin.setAttribute("width", "1200px");
        plugin.setAttribute("height", "520px");
      }
    </script>
  <meta charset="UTF-8">
  <title>Plugin Test</title>
</head>

<body>
<input  type="button" value="CreatePPAPI" onclick="createPlugin()"/>
<input  type="button" value="ChangeSize" onclick="changeSize()"/>
<input  type="button" value="RestoreSize" onclick="restoreSize()"/>
<input  type="button" value="DeletePPAPI" onclick="deletePlugin()"/>

<div id="pluginContainer">
  <!--
  <embed id="examplePlugin" type="application/x-ppapi-example" width="1200px" height="520px" />
  -->
</div>
</body>
</html>

上面的HTML演示了創建、刪除、改變大小幾種常見的操作。

須要註意的是,當你刪除一個PPAPI插件時,會調用到PPP_Instance的DidDestroy方法,你須要在這裏的C++/C代碼裏刪除插件實例,釋放對應的資源。比方Graphics 2D。Image Data等。DidDestroy調用後,過一會兒。假設沒有其它的插件實例存在。就會接著調用PPP_ShutdownModule。假設有,則不會。

個中邏輯,能夠參考理解PPAPI的設計

當你設置embed元素的width和height屬性後,PPAPI插件裏。PPP_Instance的DidChangeView方法會被調用,你須要在這裏依據新尺寸又一次創建相關資源。


就這樣吧。

其它參考文章詳見我的專欄:【CEF與PPAPI開發】。

‘).text(i)); }; $numbering.fadeIn(1700); }); });

PPAPI插件的動態創建、改動、刪除