NPAPI：修改插件对象的 CSS 属性答案

【问题标题】：NPAPI: modify plugin object's CSS propertiesNPAPI：修改插件对象的 CSS 属性
【发布时间】：2012-03-22 16:21:14
【问题描述】：

我正在为基于 WebKit 的嵌入式浏览器编写一个 NPAPI 插件。这个插件处理的对象之一是一个视频帧，我想通过它的 javascript 属性来调整大小，width 和 height。

所以，在插件的 C++ 实现中，我通过 NPAPI NP_Class 函数指针（映射到 width 和 height）公开这两个属性em>HasProperty / GetProperty / SetProperty 方法在我的例子中）。

现在，困扰我的是，当网页中的 Javascript 执行如下操作时：

<object id="video" type="video/myPluginMimeType" style="height:150px;"></object>
<script>
var video = $('video');
video.height = 250; // all happens here
</script>

它成功进入我的 C++ 代码并执行视频大小调整（在我的嵌入式平台中，它直接进入视频驱动程序）。
但是，在那之后，我被浏览器通过NPN_setWindow() 函数，返回视频对象的原始尺寸（本例中为 150px 高度）。

由于这个NPP_setWindow也是直接映射到视频驱动的，所以我一眨眼就只能看到我250px高的视频。我怀疑这都是因为浏览器只将原始的“样式”属性作为重要的属性。

所以，问题：

我能否让浏览器通过 NPAPI 以某种方式更新其宽度/高度（甚至 style？）属性？
我是否应该简单地忽略 NPP_setWindow 调用并根据对 NPN_New() 的初始调用（它为我提供对象的样式属性）和随后通过 NP API 对video.height 的调用来唯一地执行调整大小？

我承认我更喜欢第一个版本，因为它让浏览器决定何时重绘，这样我就可以拥有一个几乎无状态的视频插件。
此外，第一个版本使网页能够更改插件 DOM 对象的 CSS 属性，这将通过 NPP_setWindow 调用自动反映。

【问题讨论】：

标签： javascript c++ dom npapi browser-plugin

【解决方案1】：

<object>s 和其他 HTML 元素一样；您可以使用element.style.width 和element.style.height 更改它们的宽度和高度。一旦尺寸发生变化，您应该立即获得 NPP_SetWindow 调用，因此您无需手动滚动自己的可设置宽度和高度属性。

【讨论】：

这就是问题所在：比如说，当我在 JS 中执行此操作时：element.style.height = 150;，浏览器会在我的 NPAPI 对象中查找 style 对象。由于我没有公开该属性，因此它失败了，并且我从未看到任何 NPP_setWindow 调用。浏览器似乎没有区分 CSS 样式属性和我的对象的属性。
查看我的答案（对我自己的问题...我知道）：我未能以正确的格式发送长度。

【解决方案2】：

好的，我找到了解决方案，所以我将这里留给其他人：

我在绝对值 (object.style.width = 150;) 中设置宽度，而不是使用长度值（如此处所述：http://www.w3.org/TR/css3-values/）。正确的 javascript 代码需要是这样的：object.style.width = 150 + "px"; // or "150px" directly
总的来说，我真正的问题是我不知道如何影响我的对象的 CSS 属性来自插件 C++ 代码。我找到了解决方案here：你必须使用 NPN_GetValue(my object) / NPN_GetProperty( "style" on my object) / NPN_SetProperty( "width" on the style property) 来做到这一点。

【讨论】：

老实说，我发现你最好的选择是将对象标签本身保持在 100%、100% 并修改包含的 div；这样你就不太可能与插件对象本身发生冲突。
是的，这就是我的想法，但我无法控制人们将如何使用我的插件对象。他们中的一些人可能想要修补这个家伙的 CSS 属性......
NPN_getProperty -> NPN_GetProperty; NPN_setProperty -> NPN_SetProperty;