码迷,mamicode.com
首页 > Web开发 > 详细

动态创建并访问网页元素

时间:2015-09-13 11:54:30      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

最近在做OCX控件,但这个控件并不是一打开网页就需要初始化的,而是根据需要动态创建;在控件初始化的时候需要在控件内部获取其在网页中的DOM对象;并且创建之后需要立刻调用控件的方法。

最开始的方法如下:

1 var ctrl = document.createElement(‘object‘);
2 ctrl.classid = ‘CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584‘;
3 document.body.appendChild(ctrl);

这个方法在IE11中什么问题都没有;但在IE9中,控件初始化时获取不到其在网页中的DOM对象。

通过测试,直接在页面中添加相应的HTML代码是可以在控件初始化的时候获取到其在网页中的DOM对象的。

<HTML>
<HEAD>
<TITLE>ATL test page for object Test3</TITLE>
</HEAD>
<BODY>
<OBJECT ID="Test3" CLASSID="CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584"></OBJECT>
</BODY>
</HTML>

 

在网上搜了搜,搜到这么一篇文章《FAQ: 如何动态创建并访问网页元素》,他的思路是在OCX中用insertAdjacentHTML方法创建。这个方法无法解决“控件初始化时获取不到其在网页中的DOM对象”这问题。

看了这篇文章的实现思路,让我想起了以前看的DOM的过桥、重排与重绘的概念(参考《高性能JavaScript DOM编程以及重排与重绘》),调用getElementById会引起过桥,过桥会引起重排与重绘。

基于这个概念,于是就想通过innerHTML创建控件,是不是就跟一上来写好HTML代码是一样的。最终测试,这个方法可行。

最终代码如下:

var div = document.createElement(‘div‘);
div.innerHTML = ‘<OBJECT ID="Test4" CLASSID="CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584"></OBJECT>‘;
document.body.appendChild(div);
ctrl = document.getElementById(‘Test4‘);

 

如何在控件初始化时获取其在网页中的DOM对象,可参考我的另一篇文章《在OCX初始化时获取其在网页中的DOM对象》。

动态创建并访问网页元素

标签:

原文地址:http://www.cnblogs.com/icedream/p/4804152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!