将网页中的npapi插件对象从一个div移动到另一个div，为什么插件会破坏并重新创建？[chrome，FireFox]

Question

I got one plugin and embeded to my webpage page, the plugin is used to play media files(.mp3,mp4,m3u8, etc).my webpage looks like:

<div id='div1'>Plugin</div>
<div id='div2'><div id='div2sub'></div></div>

Plugin created like

<object id='plugin' type='xxxx' width='xxxx' height='xxxx'></object>

the problem is: when i move plugin from div1 to div2sub like:

var x = document.getElementById('plugin');
var y = document.getElementById('div2sub');
y.appenChild(x);

then I find the result IE: the plugin still playing media file, video, audio output,it works fine(ActiveX plugin) Chrome and FireFox: No video, audio output,plugin not play media file anymore.(npapi Plugin)

I found the reason is: with IE, the Plugin just moved,not destroy then recreate, with chrome and FireFox,the plugin was destroy then recreated, I have one function to register callback event on pluin, chrome console shows my plugin never received callback event, so media file can't be played.

My question is: Is there anyway I can do just move plugin, and the plugin will not be destroyed and recreated with chrome and FireFox, just works like with IE.

Thanks for help...

Answer 1

如果真的要重新创建插件，你应该提交一个错误 - 重新生成父母不应该根据WhatWG 对象元素和正在渲染的部分重新生成插件。

Answer 2

This is a pretty standard issue with npapi plugins, though; they don't behave reliably in any browser that I know of when you move them around in the DOM. Similar issues occur if you change the parent container to display: none, visibility: hidden, overflow: none, etc. ActiveX controls are even more fun.

The workaround I use is to put the plugin in a floating absolute positioned div. I put another div on the page where I want the plugin to be, and then whenever it needs to be moved I calculate the absolute position of the positioning div and move the floating div to be over it. It's a bit of a hack, but it works quite well.