Question

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

感谢您的帮助

Answer 1

在加载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>

希望有帮助。

jQuery检查动态生成的iframe中是否存在一些文本

1 个答案: