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

一旦你完毕了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开发】。

时间: 2024-10-12 22:26:29

PPAPI插件的动态创建、改动、删除的相关文章

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

一旦你完成了PPAPI插件的开发,实际使用时可能会有下列需求: 动态创建PPAPI插件 删除PPAPI插件 改变PPAPI插件的尺寸 实现起来很简单,从JS里直接访问DOM(BOM)即可.下面是一个示例HTML文件: <!DOCTYPE html> <html> <!-- Copyright (c) 2016 [email protected]微信订阅号"程序视界"(programmer_sight). All rights reserved. Use o

JQuery动态创建、删除DOM元素

动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 3.prepend,在元素的开始添加元素. prependTo.after,在元素之后添加元素(添加兄弟).before:在元素之前添加元素(添加兄弟). 删除节点 (1)remove()删除选择的节点 (2)empty()是将节点清空,清除节点的innerHTML,节点还在 动态创建Dom节点示例: 1.使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用

动态加入改动删除html表格内容

1.需求 须要实现收银台上加入改动删除商品信息时顾显能够实时看到其变化 2.解决 收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据加入改动和删除操作 3.代码 mytest.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Dynamic Table<

spring与quartz整合实现分布式动态创建,删除,改变执行时间定时任务(mysql数据库)

背景:因为在项目中用到了定时任务,当时想到了spring的quartz,写完发现费了很大功夫,光是整合就花了一上午,其中最大的问题就是版本问题,项目中用的是spring3.2.8的版本,查阅发现,3.0以上的版本需要使用quartz2.X以上版本,我就去官网下载了2.1.7的quartz,结果发现jar包与spring冲突,最后使用了quartz1.6.0版本. spring与quartz整合第一步需要导jar包,这个在百度搜下quartz的jar,下载一个 第二步:分布式定时任务,是基于数据库

(十七)jquery动态创建,删除 table 行

<style> html{ background:none;} table{ width:100%; border:1px solid #CCC; border-top:none; border-left:none; } table td, table th{ text-align:left; border-top:1px solid #cccccc; border-left:1px solid #cccccc; padding:10px; height:50px; font-size:16p

通过JS动态创建和删除HTML元素

<script type="text/javascript" language="Javascript"> function InputOnBlur() {        var name=document.getElementById("name").value; if(name.length >10 || name.length<2)              {                 var element

mybatis3动态创建表,判断表是否存在,删除表

1.mybatis3动态创建表,判断表是否存在,删除表 mapper配置文件: <span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

PPAPI插件与浏览器的通信

PPAPI的插件,原本是能够使用JS与浏览器交互的,https://code.google.com/p/ppapi/wiki/InterfacingWithJavaScript.这里还提供了一个JS与plugin交互的文档,但如今说不支持了.如今应该通过PPB_Messaging接口来完毕Plugin和浏览器的交互,详细參考revision=92312&view=markup">https://src.chromium.org/viewvc/chrome/trunk/src/ppa