JQuery проверить, есть ли текст в динамически сгенерированном iframe

Question

У меня есть скрипт, в котором, когда пользователь нажимает кнопку поиска, он создает фрейм с определенным адресом.что я хочу, если iframe успешно открыт, тогда скрипт обнаружит, есть ли в iframe одно ключевое слово.

Если ключевое слово найдено, появится предупреждение с указанием результатов, связанных с этим ключевым словом.

в соответствии с созданным мной кодом Jquery:

$('#search').click(function(sp){
    sp.preventDefault();
    var nob= $('#noB').val();
    var year = $('#year').val();
    var pin = $('#pin').val();
    if(nob==='' || year ==='' || pin===''){
        alert('All field Required');
        return false;
    }
    $('#SearchResult').html('<iframe id="iframe" src="https://dashboard.mysearchform.com/index.php?menu=result&office=0c4af0608cc742879b9960fe13e5764f&noB='+nob+'&year='+year+'&pin='+pin+'" style="width:105%;height:500px;margin-top:-60px;margin-left:-1%;"></iframe>');

    if($('iframe').contents().find("#iframe a:contains('Failure')").length()){
        alert('Data Not Found');
    }

Спасибо за помощь

Answer 1

Когда вы загружаете элемент iFrame, вы можете подождать, пока содержимое фрейма не станет равным ready.Вы можете сделать это с .ready().Таким образом, вы узнаете, что контент загружен и готов.

Также вы можете захватить элемент Body и выполнить поиск по вашей ссылке.Помните, что :contains() psuedo selector является чувствительным к регистру.Таким образом, поиск "Failure" не найдет "failure".Если вы не уверены, какой это может быть, вы можете выполнить итерацию каждого элемента A и выполнить поиск в текстовом узле с помощью регулярных выражений.

Рассмотрите следующий код.

$(function() {
  $('#search').click(function(sp) {
    sp.preventDefault();
    var nob = $('#noB').val();
    var year = $('#year').val();
    var pin = $('#pin').val();
    if (nob === '' || year === '' || pin === '') {
      alert('All field Required');
      return false;
    }
    var fr = $("<iframe>", {
      id: "myFrame",
      src: "https://dashboard.mysearchform.com/index.php?menu=result&office=0c4af0608cc742879b9960fe13e5764f&noB=" + nob + "&year=" + year + "&pin=" + pin
    }).css({
      width: "105%",
      height: "500px;",
      marginTop: "-60px",
      marginLeft: "-1%"
    });

    fr.ready(function() {
      var ibody = fr.contents().find("body");
      var fail = ibody.find("a:contains('Failure')");
      console.log(fail.length);
      if (fail.length > 0) {
        alert('Data Not Found');
      }
    });

    $("#searchResults").html(fr);
  });
});

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li label {
  width: 60px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li><label>noB:</label> <input type="text" id="noB"></li>
    <li><label>Year:</label> <input type="text" id="year"></li>
    <li><label>PIN:</label> <input type="text" id="PIN"></li>
  </ul>
  <button type="submit" id="search">Search</button>
</div>
<div id="searchResults">
</div>

URL-адрес недействителен или не может быть загружен.Но вы можете видеть, как это будет работать.

Как я уже упоминал в комментариях, вы также можете выполнить запрос GET через AJAX и просто просмотреть полученный HTML-код за кулисами.

Обратите внимание на следующее.

$(function() {
  $('#search').click(function(sp) {
    sp.preventDefault();
    var n = $('#noB').val();
    var y = $('#year').val();
    var p = $('#pin').val();
    if (n === '' || y === '' || p === '') {
      alert('All field Required');
      return false;
    }
    $.get("https://dashboard.mysearchform.com/index.php", {
        menu: "result",
        office: "0c4af0608cc742879b9960fe13e5764f",
        noB: n,
        year: y,
        pin: p
      },
      function(results) {
        var fail = $(results).find("a:contains('Failure')");
        if (fail.length > 0) {
          alert('Data Not Found');
        }
      });
  });
});

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li label {
  width: 60px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li><label>noB:</label> <input type="text" id="noB"></li>
    <li><label>Year:</label> <input type="text" id="year"></li>
    <li><label>PIN:</label> <input type="text" id="pin"></li>
  </ul>
  <button type="submit" id="search">Search</button>
</div>
<div id="searchResults">
</div>

Надеюсь, что поможет.