Доступ к iframe с JQuery без id

-3

Есть ли способ получить доступ к html iframe без использования идентификатора. У меня есть iframe, который динамически генерируется и получает новый идентификатор каждый раз, когда страница обновляется. Я пытаюсь динамически изменять размер iframe по мере изменения размера браузера, но не может понять, как получить доступ к iframe с помощью jQuery.Доступ к iframe с JQuery без id

источник

2016-01-04 bos570

Есть много * * * * много способов, но все они зависят от конкретных обстоятельств , https://api.jquery.com/category/selectors/ - достойное стартовое место. – Quentin

Errrr .... Разве вы не можете просто дать ему уникальный класс, который не изменится? – AdamJeffers

Опубликовать 'iframe' (только теги), может быть уникальный идентификатор, который не изменяется. –

Просто укажите все фреймы уникальные id. Таким образом, вы можете выбрать все фреймы с $('#uniqueId'). Если вы просто хотите, чтобы выбрать один из них, то вы можете добавить событие OnClick для каждого фрейма, который говорит вам идентификатор себя:

<iframe onClick="resize('iframe1');" id="iframe1" />

function resize(id) { 
    $('#' + id).css('height', '100px'); 
}

источник

2016-01-04 17:09:26 k97513

Почему бы не использовать класс для выбора? Таким образом, вы можете удалить уродливый и устаревший атрибут «onclick» и повторить «id». –

Моя проблема в том, что iframe генерируется библиотекой js (epub.js). Он генерируется автоматически с его собственным уникальным идентификатором, который изменяется каждый раз, когда страница обновляется. – bos570

Если вы хотите все фреймы, используйте '$ ('iframe')'. – k97513

Если у вас есть контроль над тем, где он генерируется, я 'd предложить обернуть его в родительском и настроить его относительно этого.

<div id="frameGoesHere"> 
    ... 
    <iframe id="unknownDynamicallyGeneratedID"></iframe> 
    ... 
</div>

Тогда:

$('#frameGoesHere > iframe').function(){ /* stuff */ }

источник

2016-01-04 18:40:02

К сожалению, нет. Он генерируется библиотечной функцией, и я скорее не вхожу и пытаюсь вскрыть и изменить что-либо на этом фронте. – bos570

Вы можете использовать альтернативные селекторы в сотнях различных способов, это пример показывает 3 способ сделать это:

селекторе тегов
A класс селектора
Селектор атрибутов

Одна важная вещь, связанная с iframe, заключается в том, что для загрузки требуется долгое время (относительно, конечно), поэтому разместите свои функции в пределах window.onload или используйте setTimeout.

DEMO

родитель

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     html, 
     body { 
      box-sizing: border-box; 
      font: 400 16px/1.45 "Verdana"; 
      height: 100vh; 
      width: 100vw; 
     } 

     *, 
     *:before, 
     *:after { 
      box-sizing: inherit; 
      margin: 0; 
      padding: 0; 
      border: 0 none hlsa(0%, 0, 0, 0); 
      outline: 0 none hlsa(0%, 0, 0, 0); 
     } 

     body { 
      position: relative; 
      background-color: #111; 
      color: #EEE; 
      padding: 10px; 
     } 

     label { 
      display: block; 
      color: yellow; 
      margin: 5px 0; 
     } 

     iframe { 
      height: 210px; 
      width: 600px; 
      overflow: hidden; 
      background: white; 
     } 

     fieldset { 
      width: 600px; 
      border-radius: 10px; 
      padding: 5px; 
     } 

     legend { 
      font-size: 1.3rem; 
      font-variant: small-caps; 
      color: yellow 
     } 
    </style> 
</head> 

<body> 
    <section class="jFrame"> 
     <iframe id="i-Cant" name="iName" class="iClass" src="child.html"></iframe> 
    </section> 

    <fieldset> 
     <legend>Alternate Selectors</legend> 
     <label for="out1">Tag </label> 
     <output id="out1"></output> 
     </label> 
     <label for="out2">Class </label> 
     <output id="out2"></output> 

     <label for="out3">Attribute </label> 
     <output id="out3"></output> 

    </fieldset> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
      window.onload = setTimeout(function() { 

      // Selector: tag 
      var targetTag = $('iframe').contents(); 

      // Selector: class 
      var targetClass = $('.iClass').contents(); 

      // Selector: attribute 
      var targetAttribute = $('[name]').contents(); 

      var iTag = targetTag.find('article').text(); 
      var iClass = targetClass.find('.content').text(); 
      var iAttribute = targetAttribute.find("[title]").text(); 

      $('#out1').val(iTag); 
      $('#out2').val(iClass); 
      $('#out3').val(iAttribute); 
     }, 3000); 

    </script> 
</body> 

</html>

child.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Child</title> 
</head> 

<body> 
<article class="content" title="Use Any Selector">This is the text that's targeted by the parent page by accessing the iframe with a tag, class, and attribute selector</article> 
</body> 
</html>

источник

2016-01-04 20:31:41 zer00ne

Доступ к iframe с JQuery без id

ответ

Смежные вопросы