Javascript-форум - querySelector частичное совпадение

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - querySelector частичное совпадение (https://javascript.ru/forum/events/84699-queryselector-chastichnoe-sovpadenie.html)

querySelector частичное совпадение

Добрый день.

Хочу выбрать все элементы "а", но те, у которых значение их атрибута href содержит, например example.com:

var el2 = document.querySelectorAll('a[href*="example.com"]');

но пока el2.length=0.

Как правильно написать выражение в круглых скобках?

Вроде все правильно. А в документе есть такие элементы?

Такие элементы есть.

Только обратил внимание.
Необходимые элементы А - это ссылки на внешние сайты.
Наверное из-за этого el2.length=0.

Frames?
Как их выбрать?

Не знаю, что именно у вас не работает. Может пример приводите один, а у себя пишете другое.
Все работает

<body>
<a href="http://example.com">http://example.com</a><br>
<a href="https://example.com">https://example.com</a><br>
<a href="example1.com">example1.com</a><br>
<a href="http://example.com/path/doc.html">http://example.com/path/doc.html</a><br>

<script>
document.querySelectorAll('a[href*="example.com"]')
	.forEach(el => el.style.color="green")
</script>
</body>

ronaldo, найти элемент можно только тогда, когда он есть на странице. Если у тебя скрипт выполняется раньше чем загрузятся элементы - то и будет 0. Тебе надо либо перенести скрипт вниз, либо отложить исполнение до загрузки:

addEventListener('DOMContentLoaded', () => {
  // ...
})

При загруженной необходимой странице
если выполнять эту строки в Инструментах разработчика

var elems = document.getElementsByTagName("A");
console.log (elems.length);
for(var i=0; i<elems.length; i++) console.log(elems[i].getAttribute("href"));

и при этом выбирать в выпадающем списке Javascript context: (справа от значка Clear console) разные значения то и вывод будет разный: например по количеству элементов .length.

Т.е не все необходимые элементы "A" собираются при простом getElementsByTagName, а собираются при определенном значении Javascript context:.

Как в скрипте указать этот Javascript context:?

ronaldo, оно во фреймах. Если ты используешь юзерскрипты - то тебе надо чтоб @match захватывал собственно адрес фрейма.

Если эти фреймы ведут не на другую страницу, а просто зачем-то сделаны локально, то можно запросить так:

var links = Array.prototype.reduce.call(
  document.querySelectorAll('iframe'), 
  (acc, iframe) => {
    try {
      acc.push(...iframe.contentWindow.document.querySelectorAll('a'));
    } catch (e) {
      console.warn('Cant read window, foreign domain!', iframe);
    }
    return acc;
  },
  []
)

Да - это фреймы, которые ведут на другой сайт.

При этом:
"SecurityError: Blocked a frame with origin "https://www....com" from accessing a cross-origin frame."

Цитата:

Если эти фреймы ведут не на другую страницу

Цитата:

Если ты используешь юзерскрипты - то тебе надо чтоб @match захватывал собственно адрес фрейма.

Уточняю:

Указанную SecurityError можно обойти, если применить :
"надо чтоб @match захватывал собственно адрес фрейма"?

ronaldo,
Уточняю: ты используешь пользовательские скрипты(tempermonkey, greasemonkery и т.д.) или просто хакеришь?

Во втором случае ничего сделать нельзя - это вопрос безопасности браузера, не даст он тебе лезть на чужой сайт.

В первом случае "обойти" тоже ничего нельзя, но можно запустить свой скрип уже внутри фрейма, а дельше делать то что тебе надо. Можно даже наладить общение меж твоими скриптами через postMessage либо GM_setValue.

Приер: есть сайт domain1.com, в нём iframe domain2.com.

Ты можешь сделать юзерскрипт:

// ==UserScript==
// @name        hrefs
// @match       *://domain1.com
// @match       *://domain2.com     
// ==/UserScript==

var hrefs = Array.from(
  document.querySelectorAll('a'),
  a => a.href
);

if (location.hostname === 'domain1.com') {
  console.log('hrefs domain1', hrefs);
  window.onmessage = ({data}) => {
    console.log('hrefs domain1 from domain2', JSON.parse(data));
  };
}

if (location.hostname === 'domain2.com') {
  console.log('hrefs domain2', hrefs);
  window.top.postMessage(JSON.stringify(hrefs), '*');
}