按ID访问DOM元素

时间:2014-11-20 16:08:47

标签: javascript jquery html dom

我有页面如果你点击INV001链接,它会打开一个弹出窗口。我试图使用document.getElementById(' foo')尝试访问popUp窗口中的foo对象但是我得到了空

以下是网页代码

<tbody class="">
    <tr class="tipAdded">
        <td class="first">
            <div style="display:none" class="renderedValue">
              INV001
            </div><input value="2" name="instanceId0.id" type="hidden" class="check">
        </td>
        <td class="typeString  ">
            <div class="data typeString">
                <a tooltip="" class="linkedOverlay " title="" href="/CP/user/show.do?screenId=273&amp;mode=show&amp;referringAttributeId=1329&amp;key=&amp;entityInstanceId=2&amp;parentEntityId=&amp;parentInstanceId=&amp;parentInstanceKey=&amp;parentFieldName=">
                    INV001        
              </a>
            </div>
        </td>
    </tr>
</tbody>


<div class="ui">
    <div class="literal">
        <div id="one">
<object id="foo" name="foo" type="text/html" data="../../QuickInvoice/printInvoiceSummary.do?InvoiceId=2" style="height:700px;width:750px"></object>
</div>
    </div>
</div>

弹出窗口的代码

<head>
        <title> Invoice Summary </title>

                <script type="text/javascript">
                 function getPrintData()
                {
                    var invoice = document.getElementByID('foo');
                    printHTML(invoice.data);

                }

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}
                </script>
    </head>
    <body>
        <caption align="left"><h2>Invoice Summary</h2></caption>
         <div style="position:absolute;top:0;right:0">
            <tbody>
                    <tr>
                        <th>
                            <form>
                                <input id='printWindow' type='button' onClick="getPrintData()" value='Print' class='NonPrintable' />
                            </form>
                        </th>
                    </tr>
            </tbody>        
        </div>  
        <table cellspacing='0' id='header'>     
            <tr>
              <th>Tracking Id</th>
              <td><%=invoice.get("Reference ID").toString()%></td>            
            </tr>
            <tr>
              <th>Upload Date</th>
              <td><%=invoice.get("Upload Date").toString()%></td>             
            </tr>
            <tr>
              <th>Status</th>
              <td><%=invoice.get("Status").toString()%></td>              
            </tr>           
        </table>                

    </body>
</html>

foo是弹出窗口的ID,并且getPrintData invoice值为null,有人可以帮我在弹出窗口中访问此foo

1 个答案:

答案 0 :(得分:1)

正如目前所实施的那样,document.getElementByID('foo')正试图找到元素&#34; foo&#34;在弹出文档(printInvoiceSummary.do)的上下文中,该文档当前没有id为&#34; foo&#34;的元素。如果我理解正确,你只需要访问ID为&#34; foo&#34;在父文件上:

var invoice = top.document.getElementById('foo');

或者,您也可以使用以下方法访问同一对象:

var invoice = window.frameElement;