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

原创 2006年11月18日 12:17:00
 
问========================================
 
你好:
 
       在你的博客上看到了一些关于操作Internet Explorer的代码,有个问题请教
目的:在html页面中创建一个控件,程序动态创建。
我已经获得要创建页面的IHTMLDocument2指针,看msdn提示使用createElement函数调用后能够创建以及设置属性,创建为一个element我如何把它设置为一个对象或者applet对象或一个embed对象
我调用原有页面上的控件发现为一个applet对象,以下为动态创建的函数:
void InsertElement(IHTMLDocument2 * pIHTMLDocument2 )
{
       HRESULT hr;
       IHTMLElement *pHtmlElement = NULL;
      
       CComBSTR bstrTitle = L"applet";
 
       pIHTMLDocument2->createElement(bstrTitle, &pHtmlElement);
 
       //创建后不知道如何设置成一个applet的对象或者embed对象
 
       VARIANT           vRet;
       VariantInit(&vRet);
       CComBSTR bstrClassID = L"classid";  
       vRet.bstrVal = L"clsid:75B6E755-01FB-46C0-BA16-27350A1855B1";
       vRet.vt = VT_BSTR;
       hr = pHtmlElement->setAttribute(bstrClassID, vRet);
       if ( FAILED( hr ) )
       {
              cout << _T("setAttribute错误") << endl;
              return;
       }
      
       CComBSTR bstrID = L"id";
       vRet.bstrVal = L"myocx1";
       vRet.vt = VT_BSTR;
 
       hr = pHtmlElement-> setAttribute (bstrID, vRet);
       if ( FAILED( hr ) )
       {
              cout << _T("setAttribute错误") << endl;
              return;
       }
 
       CComBSTR bstrName = L"name";
       vRet.bstrVal = L"myocx1";
       hr = pHtmlElement-> setAttribute (bstrName, vRet);
       if ( FAILED( hr ) )
       {
              cout << _T("setAttribute错误") << endl;
              return;
       }
//如果创建applet对象,是否需要其他的属性或者设置,其他方法????
。。。
}
 
答========================================
 
创建Element之后,应通过IHTMLDOMNode::insertBefore或IHTMLDOMNode::appendChild把元素添加到DOM树中去,所以代码本来应该是这样的:

LPDISPATCH lpDisp = GetHtmlDocument();
if (lpDisp)
...
    CComQIPtr
<IHTMLDocument2, &IID_IHTMLDocument2>    spDoc(lpDisp);
    
if ( spDoc )
    
...{
        CComPtr
<IHTMLElement>    spElem;
        HRESULT hr 
= spDoc->createElement(L"applet"&spElem);
        
if ( FAILED(hr) || !spElem )
            
return;
            
        CComPtr
<IHTMLElement>    pBodyElem;
        hr 
= spDoc->get_body(&pBodyElem);
        
if ( FAILED(hr) || !pBodyElem )
            
return;
            
        CComPtr
<IHTMLDOMNode>    pBodyNode(pBodyElem);
        
if ( !pBodyNode )
            
return;
            
        CComPtr
<IHTMLDOMNode>    pNewChild(pElem);
        CComPtr
<IHTMLDOMNode>    pRefChild;
        hr 
= pBodyNode->appendChild(pNewChild, &pRefChild);
        
if ( FAILED(hr) || !pRefChild )
            
return;
            
        CComQIPtr
<IHTMLObjectElement, &IID_IHTMLObjectElement> pObj(pRefChild);
        
if ( pObj )
        
...{
            
//修改属性等等
    }

    }

}

 
但试验下来最后一步总是不能成功,从pRefChild得不到pObj,尽管类似的代码用脚本实现没有什么问题:
 
<HTML>
<HEAD>
<SCRIPT>...
function createRadioButton()...{
    
// Create radio button object with value="First Choice" and then insert 
    // this element into the document hierarchy.
    var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")
    document.body.insertBefore(newRadioButton);
    
// Create radio button object with value="Second Choice" and then insert 
    // this element into the document hierarchy. 
    newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='Second Choice'>")
    document.body.insertBefore(newRadioButton);
}

</SCRIPT>
</HEAD>

<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createRadioButton()" VALUE="Create two Radio Buttons"><BR>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML">
<BODY>
</HTML>
 
看来我们只能用另外一种办法了——insertAdjacentHTML,如下:

LPDISPATCH lpDisp = GetHtmlDocument();
if (lpDisp)
...
    CComQIPtr
<IHTMLDocument2, &IID_IHTMLDocument2>    spDoc(lpDisp);
    
if ( spDoc )
    
...{
        CComPtr
<IHTMLElement>    spBodyElem;
        HRESULT hr 
= spDoc->get_body(&spBodyElem);
        
if ( FAILED(hr) || !spBodyElem )
            
return;
        
        
//我们先创建网页元素,注意给一个ID
        hr = spBodyElem->insertAdjacentHTML(L"beforeEnd", L"<applet code='RainbowText.class' ID='my applet' width='297' height='48' codebase='class/' name='rainbowText'><param name='TEXT' value='test' ></applet>");
        
if ( FAILED(hr) )
            
return;
        
        
//再通过IHTMLDocument3来访问它
        CComQIPtr<IHTMLDocument3, &IID_IHTMLDocument3>    spDoc3(lpDisp);
        
if ( !spDoc3 )
            
return;
            
        CComQIPtr
<IHTMLElement>    spElemTemp;
        hr 
= spDoc3->getElementById(L"my applet"&spElemTemp);
        
if ( FAILED(hr) || !spElemTemp)
            
return;
        
        
//把Applet作为IHTMLObjectElement来处理
        CComQIPtr<IHTMLObjectElement, &IID_IHTMLObjectElement> pApplet(spElemTemp);
        
if ( pApplet )
        
...{
            
//这样就行了
    }

    }

}

 
能抓到老鼠就是好猫:)
 
 
参考文献:
 

代码的味道

代码的味道(转贴之UMLCHINA,讲述在什么情况下进行refactoring)  (说明,这是erptao.org,refactoring论坛中关于Code Smell的一个贴子,以后我会把相关内容...
  • tar
  • tar
  • 2002-02-06 14:53:00
  • 1180

如何快速查看并定位网页元素代码

如何快速查看并定位网页元素代码 目的:可以迅速得找出一个网页中对应元素的html代码 1.首先我们打开一个网页,比如:百度首页 2.打开后我们会看到很多的文字链接以及按钮...
  • psh1234
  • psh1234
  • 2016-07-20 10:24:27
  • 2634

javascript动态创建页面元素

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

翻译:HTML5与HTML4的区别

本文选译自:W3C Working Group Note: HTML5 Differences from HTML4。 解释一下W3C Working Group Note,作为“工作组笔记” ...
  • molong421
  • molong421
  • 2016-05-24 19:12:22
  • 935

HTML DOM 快速导览 – 元素对象 《img》 (HTMLImageElement)

为 HTML 文件的内嵌元素 (embedded content) , DOM 接口为 HTMLImageElement 。 取得 的元素对象 (object) 后,可存取元素的全局属性 (g...
  • guoyf123321
  • guoyf123321
  • 2015-11-24 17:10:15
  • 1662

[IE编程] IE8 新增的C++开发接口

 IE8 中新增API 函数: 
  • WinGeek
  • WinGeek
  • 2009-02-26 03:05:00
  • 9479

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

  FAQ: 如何动态创建并访问网页元素收藏新一篇: Internet Explorer 编程简述(十三)调用IE隐藏的命令(续) | 旧一篇: Internet Explorer 编程简述(十二)正...
  • skyremember
  • skyremember
  • 2008-09-28 11:40:00
  • 816

动态创建Dom元素,并设置属性和类----JS&JQ

直接上的代码HTML代码 JS代码var container = $('.pc-container'); $('').attr({ src:'images/star.png' ...
  • WRian_Ban
  • WRian_Ban
  • 2016-04-09 12:17:41
  • 2582

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

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

04——javascript Dom 动态创建元素 操作样式

——采自传智播客的教学笔记(手打难免有错)
  • kkcjs
  • kkcjs
  • 2016-11-08 20:31:13
  • 1310
收藏助手
不良信息举报
您举报文章:FAQ: 如何动态创建并访问网页元素
举报原因:
原因补充:

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