锚标记上的 JQuery click() 未从 WebBrowser 控件内的注入脚本触发

Posted

技术标签:

【中文标题】锚标记上的 JQuery click() 未从 WebBrowser 控件内的注入脚本触发【英文标题】:JQuery click() on anchor tag not firing from an injected script inside WebBrowser control 【发布时间】:2017-10-27 14:04:25 【问题描述】:

我正在使用 WinForms WebBrowser 控件开发一个网络机器人。除了以下代码中的第二个click() 调用外,一切正常:

function SaveRecordClick() 
    try 
        var menuButton = $('#s_at_m_4');
        menuButton.click();             //<-- This is working
        var x = $('#s_at_m_4-menu li')[5];
        var saveLink = $(x).find('a')[0];
        if (saveLink != null)
            saveLink.click();           //<-- This is not working

            return "1";
        
    
    catch (err) 
        alert(err.message);
    
    return "0";

saveLink 不为空。我知道这一点是因为我在条件中放置了一个 alert() 调用。

使用建议的解决方案更新代码

function SaveRecordClick() 
    try 
        var menuButton = $('#s_at_m_4');
        menuButton.click();
        var x = $('#s_at_m_4-menu li').eq(5);
        var saveLink = x.find('a').eq(0);
        if (saveLink != null) 
            alert(saveLink.html());
            saveLink.click();

            return "1";
        
    
    catch (err) 
        alert(err.message);
    
    return "0";

但还是同样的问题。 'alert()' 工作正常,但 html() 显示的是内部文本而不是锚点的 HTML。

HTML 代码

<li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
<a href="javascript:void(0)" aria-disabled="false" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
</li>

锚标签的ID是动态生成的。

此外,当从 Google Chrome 控制台执行相同的代码时,click() 会触发。那么,会不会是 WebBrowser 控件的问题?

更新

我认为这是继承 Internet Explorer 的 webbrowser 控件的问题。所以现在我正在转移到另一个浏览器控件并测试它的代码。如果它在那里工作,会通知你。

【问题讨论】:

您希望 saveLink.click() 做什么?请记住,saveLink 没有 jQuery 对象。它是元素,因为您在普通元素上执行 [0] 而不是 eq(0) 和 click() 不会导致任何与 jQuery 绑定的单击处理程序执行。 对于那些说您需要将saveLink 包装在$() 中的人。 .click() 是一个 DOM 函数,它不是一个 jQuery 函数,jQuery 有 .click(&lt;eventhandler&gt;) 将事件处理程序绑定到 onclick,即它的缩写 .on( "click", &lt;eventhandler&gt;) @NickA api.jquery.com/click/#click click() 的第三个选项确实存在于 jQuery 中。这是 trigger('click') 的简写 @Taplar 除了它所做的只是调用 DOM click 函数,所以不是真的 你的声明说jquery没有没有参数的click()方法。但确实如此。用户对于他们是否拥有 Element 或 JQuery 元素的困惑与此无关。 【参考方案1】:

您必须使用 jQuery 包装您的对象才能使其工作:

var saveLink = $($(x).find('a')[0]);

【讨论】:

HTMLElement 对象也有一个click() 方法:developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click 不要重新包装。使用 eq(0) 而不是 [0] @Taplar,不错的收获! @Shiva,您能否用 HTML 代码补充您的问题? 这次对话帮助我找到了解决方案。所以赏金给你,投票给@Taplar 的评论。我会发布答案。【参考方案2】:

尝试使用以下条件:

    trigger('click') 而不是 clickif(saveLink) 更改 if 条件验证。它同时验证 null,undefined all false 语句 返回number=&gt; 0 而不是sting =&gt;'0' anchor 标记重定向与window.location.href 一起使用并从锚点获取href 值尝试与attr('href')
function SaveRecordClick() 
  try 
    var menuButton = $('#s_at_m_4');
    menuButton.trigger('click');
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink) 
      alert(saveLink.html());
      window.location.href=saveLink.attr('href');
     return 1;
    
   catch (err) 
    alert(err.message);
  
  return 0;

工作示例

function SaveRecordClick() 
  try 
    var menuButton = $('#s_at_m_4');
    menuButton.trigger('click');
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink) 
      alert(saveLink.html());
      window.location.href=saveLink.attr('href');
     return 1;
    
   catch (err) 
    alert(err.message);
  
  return 0;

SaveRecordClick()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="s_at_m_4-menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
    <a href="https://example.com" aria-disabled="false" onclick="console.log('s')" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
  </li>
  <li></li>
</ul>

【讨论】:

无法正常工作,因为锚点href="javascript:void() 并将其传递给window.location.href 将打开空白页。【参考方案3】:

saveLink 永远不会是null,因为find/eq 将始终返回一个 jQuery 对象,无论该元素是否存在。

请尝试使用length 属性来检查是否存在:

if (saveLink.length)

【讨论】:

【参考方案4】:
function SaveRecordClick() 
    try 
        var menuButton = $('#s_at_m_4');
        menuButton.click();
        var x = $('#s_at_m_4-menu li').eq(5);
        var saveLink = x.find('a').eq(0);
        if (saveLink != null) 
            alert(saveLink.html());
            saveLink.live('click');//Use live click 

            return "1";
        
    
    catch (err) 
        alert(err.message);
    
    return "0";

【讨论】:

不工作。 function not foundlive() 已被弃用。最有可能从图书馆中删除:api.jquery.com/category/removed【参考方案5】:

savelink 应该是用于空检查的 dom 元素

var saveLink = $(x).find('a:first')[0];

var saveLink = $(x).find('a').eq(0)[0];

var saveLink = $(x).find('a').first()[0];

【讨论】:

我尝试了所有三种方法。 SaveLink 不为空,但不会触发点击。 window.location = $(savelink).attr('href') 可能 这行不通。请参阅我分享的 HTML 代码。 href="javascript:void(0)" 的值。它将重定向到一个空白页面。 我测试了jquery ui here,并且anchor可以用作装饰非功能性 但是在谷歌浏览器的控制台中直接使用JS点击锚点是有效的。这意味着锚是有效的。此外,我什至尝试单击其父元素。但没有任何效果。【参考方案6】:

我不明白 需要点击还是在点击中添加功能?

添加功能:

jQuery('teste').click(function()console.log('teste'));

点击:

jQuery('teste').trigger('click');

【讨论】:

我需要触发对锚标记的点击。第二个。但它不起作用。【参考方案7】:

Teste 使用了 jQuery。

jQuery(saveLink).click(function()
console.log('click!');
);

【讨论】:

【参考方案8】:

试试这个

$(document).on('click',$(saveLink),function(event) ///your code )

【讨论】:

它在点击时执行此函数内的代码,但不执行链接的原始操作。我没有尝试将新的点击操作绑定到此链接,而是在第三方网站上执行操作。操作是将记录保存在该网站的数据库中。我正在开发一个机器人。 试试这个然后$(saveLink).click(), put a breakpoint there and see in Watch if saveLink is != of undefined, if it is should work 在构建 WinForms 项目时,JavaScript 中的断点不起作用。但是我通过执行alert(saveLink.html()) 检查了saveLink!=undefined,它成功地获取了HTML。【参考方案9】:

从 JavaScript 触发事件的最佳方式

$( "#ID" ).trigger( "click" ); 

我希望它对你有用。

【讨论】:

【参考方案10】:

带有建议解决方案的更新代码很好,但 .html() 方法获取 HTML 元素的 content。因此,您需要使用saveLink.parent().html() 来获取锚点的外部 HTML。 如果父容器中有其他元素,您可以创建临时元素以仅获取 hiperlink HTML:

var anchorHTML = $('<div>').append(saveLink.clone()).html();

要使用 Javascript 单击 saveLink,请尝试使用 x.find('a')[0].click() 而不是 saveLink.click()。 为了清晰起见,我在href 属性中使用了您的个人资料的 URL。如果您运行下面的 sn-p,那么将模拟用户点击链接并显示您的个人资料页面。

function SaveRecordClick() 
  try 
    var x = $('#s_at_m_4-menu li').eq(5);
    var saveLink = x.find('a').eq(0);
    if (saveLink != null) 
      var anchorHTML = $('<div>').append(saveLink.clone()).html();
      alert(anchorHTML);
      saveLink[0].click();
      return "1";
    
   catch (err) 
    alert(err.message);
  
  return "0";

console.log(SaveRecordClick());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="s_at_m_4-menu">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li data-caption="Save Record                [Ctrl+S]" class="sbui-appletmenu-item  ui-menu-item" role="presentation">
    <a href="https://***.com/users/1124494/aishwarya-shiva" aria-disabled="false" class="ui-corner-all" id="ui-id-254" tabindex="-1" role="menuitem">Save Record                [Ctrl+S]</a>
  </li>
  <li></li>
</ul>

【讨论】:

好的,它适用于获取 HTML。但这只是为了测试saveLink 是否为null 而不是。主要目标是使用 Javascript/JQuery 不获取 HTML 单击 saveLink。但它没有触发。 @AishwaryaShiva,我已经更新了答案。请再试一次。成功了吗? @AishwaryaShiva,我对您的代码进行了一些修改,并且可以正常工作。尝试从我的答案中运行 sn-p。也许我不明白你想要什么? @AishwaryaShiva,你的麻烦还没解决吗?尝试运行 sn -p,并告诉我,什么不适合?也许我可以改进它。 @AishwaryaShiva,这很奇怪。当我运行 sn-p 时,会显示带有 saveLink 外部 HTML 的警报框。在我单击警报框上的“确定”按钮后,您的个人资料页面将出现在结果窗口中。我不明白你的问题是什么,但例子really works。【参考方案11】:

记住一件事 javascript 和 javascript 框架是事件驱动的,所以请不要尝试实现函数式编程概念

$(document).ready(function()
   $("#s_at_m_4").click(function()
   // put your code here   
   );
);

【讨论】:

【参考方案12】:

我的理论是 click 函数实际上并没有绑定到元素上。这可能是由于执行脚本或单击绑定时页面中尚未出现 html。尝试检查 saveLink.click() 中的绑定点击;

试着把它做成格式

$(body).delegate(saveLink, 'click', function() //try alert here to check );

【讨论】:

【参考方案13】:

感谢大家的回答和cmets。

花了一周时间研究第三方网站,今天我终于找到了解决问题的方法。实际上问题不在于 JavaScript 或 HTML,而是网站验证我尝试使用我的机器人自动填充的表单的方式。

我奖励了在 cmets 中的对话给我一些提示的答案。

点击saveLink 没有触发,因为我使用.val() 以编程方式设置文本框的值,但由于某种原因,网站没有保存使用此函数直接设置的值。但是,当我使用从服务器加载文本框值的组合框更改值时(尽管从服务器设置的值或使用 val() 函数完全相同。),然后单击成功触发。

我还在各个地方使用了setTimeout(),因为代码执行速度太快,无法在某些表单字段中设置值。

因此,如果将来有人遇到类似问题,请务必研究您尝试提交的页面或表单的行为。

【讨论】:

以上是关于锚标记上的 JQuery click() 未从 WebBrowser 控件内的注入脚本触发的主要内容,如果未能解决你的问题,请参考以下文章

Meteor 或 Iron Router 是不是会干扰锚标记上的 jQuery 事件?

使用 JavaScript/jQuery 将 URL 保存在锚标记中?

Vue @click 不适用于存在 href 的锚标记

添加 href 属性后,ng-click 不适用于 Internet Explorer 中的锚标记

如何在jquery中找到第一行第一个锚标记?

是否“禁用”锚标记的有效属性