PPAPI插件的动态创建修改删除

Posted 2020-06-19 foruok

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PPAPI插件的动态创建修改删除相关的知识，希望对你有一定的参考价值。

一旦你完成了PPAPI插件的开发，实际使用时可能会有下列需求：

动态创建PPAPI插件
删除PPAPI插件
改变PPAPI插件的尺寸

实现起来很简单，从JS里直接访问DOM（BOM）即可。下面是一个示例html文件：

<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2016 foruok@微信订阅号“程序视界”(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开发】。

以上是关于PPAPI插件的动态创建修改删除的主要内容，如果未能解决你的问题，请参考以下文章