再谈动态创建网页元素

原创 2006年12月10日 11:03:00
 

关键字:IHTMLOptionElementFactory,IHTMLImageElementFactory,createElement

 

1、概述

在《FAQ:操纵下拉列表》中我曾写到如何调用IHTMLDocument2::createElementIHTMLSelectElement::add动态为IHTMLSelectElement添加表项:

 

  先调用IHTMLDocument2::createElement创建一个option对象,

  HRESULT createElement(          
      BSTR eTag,               
//标签名,可以是img, area, option(ie4), frame, iframe(ie5)

      IHTMLElement **newElem   //返回对象指针
  );

  再调用IHTMLSelectElement::add将创建的option对象添加到列表中

  HRESULT add(          
      IHTMLElement 
*
element,
      VARIANT before   
//添加到哪个位置,VT_I4类型的VARIANT

  );

 

方法来自

 

<SCRIPT LANGUAGE="JScript">...
var oOption = document.createElement("OPTION");
oOption.text
="Ferrari"
;
oOption.value
="4"
;
oSelect.add(oOption);
</SCRIPT>

 

但事实上类似的代码在C++中却不能工作。

 

 

2、发现

写文章时测试过脚本调用之后就放在一边了,而真正写程序用到时才发现上面的问题。MFC中有个很好用的类CDHtmlDialog,提供了类似于CDialog的行为用以实现以HTML为表现形式的对话框,像Visual Studio 7/8的的Wizard,添加类等对话框就使用了类似的技术。CDHtmlDialog的核心在于MFC中被用得出神入化的宏,再加上一系列DDX函数来实现HTML content和应用程序的数据的数据交换。比如下面的函数可以实现读取某个能够匹配szIdIHTMLSelectElement中被选中的值,或选中value所指定的那个IHTMLOptionElement

 

void CDHtmlDialog::DDX_DHtml_SelectString(LPCTSTR szId, CString& value, BOOL bSave)
...
{
    CComPtr
<IHTMLDocument2>
 sphtmlDoc;
    GetDHtmlDocument(
&
sphtmlDoc);
    
if (sphtmlDoc ==
 NULL)
        
return
;

    COleVariant varEmpty, varIndex;

    CComPtr
<IHTMLSelectElement>
 spSelect;
    CComPtr
<IDispatch>
 spdispOption;
    CComPtr
<IHTMLOptionElement>
 spOption;
    CComBSTR bstrText;
    HRESULT hr 
=
 S_OK;
    
long lIndex=-1
;

    hr 
= GetElementInterface(szId, __uuidof(IHTMLSelectElement), (void **&
spSelect);
    
if (spSelect ==
 NULL)
        
return
;

    
if
 (bSave)
    
...
{
        
// get the selected item

        value.Empty();
        spSelect
->get_selectedIndex(&
lIndex);
        
if (lIndex >= 0
)
        
...
{
            varIndex 
=
 lIndex;

            spSelect
->item(varIndex, varEmpty, &
spdispOption);
            
if
 (spdispOption)
            
...
{
                spdispOption
->QueryInterface(__uuidof(IHTMLOptionElement), (void **&
spOption);
                
if
 (spOption)
                
...
{
                    spOption
->get_text(&
bstrText);
                    
if
 (bstrText)
                        value 
=
 bstrText;
                }

            }

        }

    }

    
else
    
...{
        bstrText.Attach(value.AllocSysString());
        lIndex 
=
 Select_FindString(spSelect, bstrText, FALSE);
        spSelect
->
put_selectedIndex(lIndex);
    }

}


 

MFC只提供了比较基本的交换函数,更复杂的的数据交换则需要自己实现了。比如我有一个CStringArray,希望能以CStringArray中的每个字符串为Value动态创建IHTMLOptionElement并添加到IHTMLSelectElement,或者将所有IHTMLSelectElementIHTMLOptionElementValue作为字符串保存到CStringArray中,该怎么办呢?

 

很简单啊,用文章开头说到的方法动态创建IHTMLOptionElement不就行了。但实际上虽然程序运行不保错,但MSHTML似乎没有任何反应。看来createElement只能用脚本调用了,《FAQ: 如何动态创建并访问网页元素》一文中讨论的问题也证明了这一点。同时,在那篇文章中能解决问题的insertAdjacentHTML对于IHTMLSelectElementIHTMLOptionElement也没有用。

 

 

3、方案

第一反应当然是上网搜了。我于是发现有个朋友在FAQ:操纵下拉列表》的CSDN文档中心版本作了如下的回复:

 

According to MSDN, “Before you can add an element to a collection, you must create it first by using the IHTMLDocument2::createElement method”. Actually, it does not work.

See the detail 
in
 codeproject  

 

codeproject 的这篇文章,指的是《How to operate controls in an HTML file, using C++》,其中说到应该使用IHTMLOptionElementFactory来创建IHTMLOptionElement。而IHTMLOptionElementFactory需要从IHTMLWindow2(该文说应该从DocumentScript来获得IHTMLWindow2,其实从DocumentparentWindow更为直接)的Option来得到,再看MSDN,我们发现同样还有一个IHTMLImageElementFactory接口(从IHTMLWindow2Image得到)用于创建IHTMLImgElement。看来要么这两个接口有特殊的地方,要么就是历史遗留问题了。因为令人感到奇怪的是MSDN中关于IHTMLDocument2::createElement方法的说明对这两个接口只字不提:

 

In Microsoft Internet Explorer 4.0, the only new elements you can create are img, area, and option. As of Internet Explorer 5, you can create all elements programmatically, except for frame and iframe. In addition, the properties of these created elements are read/write and can be accessed programmatically. Before you use new objects, you must explicitly add them to their respective collections or to the document. To insert new elements into the current document, use the IHTMLDOMNode::insertBefore or IHTMLDOMNode::appendChild methods. 

Attributes can be included with the eTag as long as the entire string is valid HTML. 

 

 

4、示例

下面的函数演示了如何使用IHTMLOptionElementFactory来实现前面我们希望完成的功能,

 

void CMyDHtmlDialog::DDX_DHtml_SelectOptions(CDataExchange* pDX, LPCTSTR szId, CMIEStringArray& value)
...
{
    CComPtr
<IHTMLDocument2>
 sphtmlDoc;
    GetDHtmlDocument(
&
sphtmlDoc);
    
if (sphtmlDoc ==
 NULL)
        
return
;

    COleVariant varEmpty, varIndex;

    HRESULT hr 
=
 S_OK;
    CComPtr
<IHTMLSelectElement>
 spSelect;
    hr 
= GetElementInterface(szId, __uuidof(IHTMLSelectElement), (void **&
spSelect);
    
if (spSelect ==
 NULL)
        
return
;

    
if (pDX->
m_bSaveAndValidate)
    
...
{
        
// get the selected item

        value.RemoveAll();
        
long length = 0
;
        spSelect
->get_length(&
length);

        
for (long lIndex = 0; lIndex < length; lIndex++
)
        
...
{
            varIndex 
=
 lIndex;
            CComPtr
<IDispatch>
 spdispOption;
            spSelect
->item(varIndex, varEmpty, &
spdispOption);
            
if
 (spdispOption)
            
...
{
                CComPtr
<IHTMLOptionElement>
 spOption;
                spdispOption
->QueryInterface(__uuidof(IHTMLOptionElement), (void **&
spOption);
                
if
 (spOption)
                
...
{
                    CComBSTR bstrText;
                    spOption
->get_text(&
bstrText);
                    
if
 (bstrText)
                    
...
{
                        value.Add(bstrText);
                    }

                }

            }

        }

    }

    
else
    
...{
        
long length = 0
;
        spSelect
->get_length(&
length);
        
for (long lIndex = 0; lIndex < length; lIndex++
)
        
...
{
            spSelect
->remove(0
);
        }


        CComQIPtr
<IHTMLWindow2> spWindow;
        
if ( FAILED(sphtmlDoc->get_parentWindow(&spWindow)) || !
spWindow )
            
return
;

        CComQIPtr
<IHTMLOptionElementFactory>
 spOptionFactory;
        
if ( FAILED(spWindow->get_Option(&spOptionFactory)) || !
spOptionFactory )
            
return
;

        
// Add each items to selection

        for (long lIndex = 0; lIndex < value.GetCount(); lIndex++)
        
...
{
            CString strOption 
=
 value[lIndex];

            
// Get current item in the dictionary

            IHTMLOptionElement * pOption;
            VARIANT_BOOL vt_b 
= lIndex == 0 ?
 VARIANT_TRUE : VARIANT_FALSE;
            
if ( FAILED(spOptionFactory->
create(CComVariant(strOption), CComVariant(strOption), 
                CComVariant(vt_b), CComVariant(vt_b), 
&pOption)) || !
pOption )
                
continue
;

            
// Add to selection tag

            if ( FAILED(spSelect->add((IHTMLElement*)pOption, CComVariant(lIndex))) )
                
continue
;
        }

    }

}

 

 

参考文献:

FAQ:操纵下拉列表

FAQ: 如何动态创建并访问网页元素

CSDN技术中心 FAQ:操纵下拉列表

How to operate controls in an HTML file using C++

javascript动态创建页面元素

    function createDiv(){        var chileE1 = document.createElement("div");                var txt...
  • winson4282000
  • winson4282000
  • 2008-02-17 14:41:00
  • 4465

jQuery动态创建元素以及追加节点

我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("百度"); $("ul").append(str); //将动态创建的str元...
  • k491022087
  • k491022087
  • 2016-09-24 22:42:57
  • 10328

jquery实现动态创建页面元素(ul,li列表实例)

本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到,所以只好写了onclick方法点击实现生成,如果哪位好汉有比较巧妙地方法评论介绍一下! 层级也没写太多,不...
  • qiang_java
  • qiang_java
  • 2016-10-18 15:27:58
  • 8707

原生js,jquery通过ajax获得后台json数据动态新增页面元素

一、原生js通过ajax获取json数据 原生js创建ajax对象比较复杂,因为IE浏览器对ajax对象的创建于其他浏览器不同,下面创建ajax对象的方法就兼容了不同的浏览器 function ...
  • Dorry_L
  • Dorry_L
  • 2015-09-25 20:37:45
  • 6962

jQuery给动态生成的元素添加事件

有时需要向页面内动态添加元素,其中可能还需要给这些追加的元素绑定事件,这时候采用jquery是很方便的。 1、采用live()方法(该方法与1.4版本后废弃): live()方法可以给所有元素附加...
  • qq_24849765
  • qq_24849765
  • 2016-07-13 23:49:01
  • 3348

再谈动态创建网页元素收藏

 再谈动态创建网页元素收藏 | 旧一篇: 代码重温:TZoCInetChecker——一个检测网络连接的类function StorePage(){d=document;t=d.selection?(...
  • skyremember
  • skyremember
  • 2008-09-28 11:46:00
  • 1393

JS中动态创建元素的三种方法

1、动态创建元素一 document.write()   例如向页面中输出一个 li 标签 document.write("123"); body标签中就会插入但是这种方法几乎不用,因为这...
  • k491022087
  • k491022087
  • 2016-09-19 23:00:00
  • 2413

jQuery如何获取动态添加的元素

一、问题描述   用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法   度娘推荐的方法基本是用l...
  • liu4071325
  • liu4071325
  • 2016-10-10 18:01:16
  • 6735

JS<em>动态</em>添加删除HTML<em>元素</em>(实例)

页面div拖动交换位置,<em>动态</em>添加删除<em>页面元素</em> 立即下载 上传者: dpniao03 时间: 2012-04-23 综合评分: 4 积分/C币:3 js 操作表格<em>动态</em>添加和删除行 立即下载...
  • 2018年04月15日 00:00

动态创建元素的三种方式

方式一 document.write():不常用,因为容易覆盖原来的页面 方式二 innerHTML:用得比较多,绑定属性和内容比较方便 方式三 createElem...
  • UNDEFINED_AUBE
  • UNDEFINED_AUBE
  • 2017-12-12 18:34:17
  • 93
收藏助手
不良信息举报
您举报文章:再谈动态创建网页元素
举报原因:
原因补充:

(最多只允许输入30个字)