时间戳

首页 > 解决方案 > Jquery检查动态生成的iframe中是否有一些文本

jquery - Jquery检查动态生成的iframe中是否有一些文本

问题描述

我有一个脚本，当用户单击搜索按钮时，该脚本将创建一个具有特定地址的 iframe。我想要的是，当 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');
    }

谢谢你的帮助

标签： jqueryiframe

解决方案

加载 iFrame 元素时，您可能希望等到框架的内容为ready. 您可以使用.ready(). 这样您就知道内容已加载并准备就绪。

此外，您可能想要捕获 Body 元素并在其中搜索您的链接。请记住，:contains()伪选择器是区分大小写的。所以一搜"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 似乎无效或无法加载。但是你可以看到它是如何工作的。

正如我在评论中提到的，您还可以通过 AJAX 执行 GET 请求，然后在后台查看生成的 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>

希望有帮助。

推荐阅读