Найти элемент с помощью innerHTML для вызова angular ng-щелкнуть из введенного javascript

ProgramBox

Найти элемент с помощью innerHTML для вызова angular ng-щелкнуть из введенного javascript

Post author:admin
Запись опубликована:2 мая, 2023
Post category:Вопросы по программированию

#javascript #angularjs

Вопрос:

Я пытаюсь вызвать ng-click из определенного a-тега на веб-странице из внедренного скрипта.

Как я мог бы найти точный a-тег со своей страницы? Я знаю, если бы у меня было имя класса, которое я мог бы написать ($(‘a.classname’)), но есть ли способ найти тег, который содержит innerHTML Apple?

Если нет, можно ли вызвать ng-click, поскольку это 10-й a-тег на странице? Как[10]?

Тег на странице:

     <a ng-click="myFunction()">Apple</a>

Введенный скрипт:

     angular.element($('a')).scope().$apply(function() {
    angular.element($('a')).scope().myFunction();
    });

1. Пожалуйста, объясните from an injected script . Возможно, вам также придется использовать $compile для получаемого элемента html.

2. Не могли бы вы предоставить js-скрипку для этого?

3. Я не совсем уверен, что полностью понял ваш вопрос. Вы имеете в виду, что хотите вызвать событие click определенного тега привязки? . Чтобы найти тег привязки с определенным текстом, вы можете захватить все теги привязки, а затем выполнить итерацию по нему и проверить, textContent включает ли он слово apple .

4. Кажется чрезмерно сложным, попробуйте просто нажать на элемент… $('a').eq(9)[0].click() . Если вам нужна область, она назначается элементу dom, а не объекту jQuery.

Ответ №1:

Если вы пытаетесь сделать это извне, например, в расширении или с консоли, вы могли бы просто вызвать событие click для целевого элемента.

Вы могли бы использовать eq() для таргетинга на индекс <a> или использовать :contains селектор или для большей детализации тестирования текста использовать filter()

 angular
  .module('app', [])
  .controller('MainCtrl', ($scope) => {
    $scope.myFunc = (val) => {
      console.log('Clicked value = ', val)
    };
  });

// from outside angular app
setTimeout(() => {
  // by index
  $('a').eq(3).click()
  // or by text contains
  $('a:contains(Apple)').click();
  // using filter()
  $('a').filter(function() {
    return this.textContent.trim() === 'Apple';
  }).click();

}, 500)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>

<div ng-app="app" ng-controller="MainCtrl">
  <a href ng-click="myFunc(1)">1</a>
  <a href ng-click="myFunc(2)">2</a>
  <a href ng-click="myFunc(3)">3</a>
  <a href ng-click="myFunc(4)">Apple</a>
</div>

1. И вы правы, я работаю над расширением для Safari, и прежде чем я смогу запустить свой другой скрипт, мне сначала нужно запустить определенную функцию в теге. К сожалению, я упустил из виду, что в других местах страницы были другие теги a с тем же innerHTML и функцией, но я думаю, что это могло бы быть возможно и с использованием xpath? Так что я тоже попробую. Но еще раз большое спасибо за ответ, я, конечно, слишком усложнил вещи, как кажется. Никогда раньше не работал с сайтом, который использовал angular, у меня немного закружилась голова. 🙂

Ответ №2:

Что касается моего комментария о xpath в ответе charlietfl, подумал, что я также хотел бы поделиться примером, на который я ссылался.

 // by specific anchor tag from full xpath

var nodesSnapshot = document.evaluate("//html/body/div[1]/a[1]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i   )
{
nodesSnapshot.snapshotItem(i).click();
nodesSnapshot.snapshotItem(i).style.background = 'yellow';
console.log('Clicked first <'   nodesSnapshot.snapshotItem(i).tagName   '> tag and marked it yellow')
}

// or by specific anchor tag from xpath by index that contains the text

var nodesSnapshot = document.evaluate("//a[3][text()[contains(., 'Apple')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i   )
{
nodesSnapshot.snapshotItem(i).click();
nodesSnapshot.snapshotItem(i).style.background = 'pink';
console.log('Clicked third <'   nodesSnapshot.snapshotItem(i).tagName   '> tag that contains '   nodesSnapshot.snapshotItem(i).text   ' and marked it pink')
}

 <div ng-app="app" ng-controller="MainCtrl">
  <text>1: </text><a ng-click="myFunction()">Apple</a>
  <text>2: </text><a ng-click="myFunction()">Apple</a>
  <text>3: </text><a ng-click="myFunction()">Apple</a>
</div>