在尝试以编程方式导航时,如何为Webkit / Mozilla克服不同的DOM?

时间:2012-03-23 13:55:57

标签: dom javascript-events webkit

问题

我正在构建一个广泛使用Ajax和Javascript的网站。该项目开始于谷歌Chrome之前,我需要升级在Mozilla中运行的代码,现在在Chrome中同样运行良好。

我遇到问题的区域是关于弹出式DIV图层,其中显示了一个表单。底层页面还包含一个表单。每个表单都使用Ajax提交。这是弹出窗口中我遇到问题的那个。

我遇到困难的javascript被用在很多页面上,所以如果我能修复它,它将解决很多问题。

它由单个文本字段和表结构中包含的按钮组成。它没有表单标签,只有文本输入元素和标准按钮。单击该按钮会触发onClick事件,将必要的参数发送到名为addpop()的函数。

addpop()的功能是识别表单元素的所有父节点(它们都在同一父节点中)。之后,调用另一个脚本来识别每个元素,但在此之前它们都会崩溃。

它应该从触发事件的活动元素获取父节点。它在Firefox中工作,但Webkit似乎有不同的结构,所以它不起作用。我希望实现的是替代违规部分代码。

我希望这可以在不对页面进行任何更改的情况下实现,但仅限于javascript,这样我就没有堆栈页面可以完成并更新。

javascript如下:

function addpop(tbl, cid, e, divName, dd, elemName, res)
{
    // reset result message
    var result = document.getElementById(res);
    result.innerHTML = '<br>';

    // get form name for use in the validation
    // get the triggering element
    if (window.document.activeElement)
    {
        e = window.document.activeElement;
    }
    else
    {
        var el = window.event;
        e = e.target ? e.target : e.srcElement; // event target
    }

    // Note in comments below the result of echoing the current node name
    // in Chrome and Firefox at the points specified.

    // chrome = object HTMLBodyElement    (ff = object HTMLInputElement)

    if (e != null) { e = e.parentNode; }
    // chrome = object HTMLHtmlElement    (ff = object HTMLTableCellElement)

    if (e != null) { e = e.parentNode; }
    // chrome = object HTMLDocument       (ff = object HTMLTableRowElement)

    if (e != null) { e = e.parentNode; }
    // chrome = null                      (ff = object HTMLTableSectionElement)

    if (e != null) { e = e.parentNode; }
    // chrome = null                      (ff = object HTMLTableElement)

    // At this point, in Firefox, e=[object HTMLTableElement]
    // and I need to get Webkit to reflect the same, so that when e is passed
    // to validate_form() it will be treated the same way as it does when sent
    // by firefox. So basically I need to replace those 4 "if" statements above
    // for something with is normalized to both browsers.

str = validate_form(e);
};

为了完整性,我将包含下面的DIV代码,其中包含弹出窗体:

<div id="popCustomer">
    <a id="popCustomerX" onclick="disablePopup('popCustomer', 0);" style="cursor:pointer;">x</a>  
    <h1>Add New Customer</h1>  
    <p><font size="1.9em" face="Tahoma, Arial, Helvetica, sans-serif">&nbsp;&nbsp;Please see the help guidelines before adding a new customer.</font></p>

    <p><font size="1.9em" face="Tahoma, Arial, Helvetica, sans-serif">&nbsp;&nbsp;To add new customer, complete the form below. Don't forget to press 'Save' afterwards.</font></p>
    <br />
    <div id="result1" align="center"><br></div>

    <table width="82%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="2" align="center" height="25" class="th">CUSTOMER DETAILS</td>
        </tr>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td align="right">Customer Name*:&nbsp;</td>
          <td height="25">
              <input name="cust_comp_name" type="text" id="cust_comp_name" tabindex="1" size="33" maxlength="60" param="required" desc="Customer name" />
          </td>
        </tr>
        <tr>
            <td width="40%" height="25">&nbsp;</td>
            <td width="60%"><input type="button" name="button1" id="button1" class="button" value="Save" onclick="addpop('customers','<?=$company_id;?>',event, 'popCustomer', 'selcustomers', 'cust_comp_name', 'result1');">
            </td>
        </tr>
    </table>
</div>

我知道html包含严重折旧的元素,并且还缺乏有效的CSS使用。我在2007年开始这个项目的时候,我正在切牙,只是把它从衣柜里拉出来把它弄脏,然后看看我能不能把它弄完。我不是一个专业的程序员。为了达到生产标准,我需要进行大量的清理工作 - 我知道!

对于这四个失败的“if”语句的任何指针都将非常感激。我花了3天的时间试图让这个部分在webkit上工作。感谢。

0 个答案:

没有答案