从 iframe 中的数据中搜索字符串数据答案

【问题标题】：Search for string data from data in an iframe从 iframe 中的数据中搜索字符串数据
【发布时间】：2016-04-13 11:41:36
【问题描述】：

我正在尝试制作一个可以使用其源代码搜索网页中元素的程序。（即，首先我将在应用程序中输入一个网页地址。假设我在应用程序中输入www.google.com。然后我将搜索type="text"，然后程序应该搜索源代码google.com 并告诉我在 Google 的源代码中找到的 type="text" 元素的数量）。

我正在使用iWEBTool提供的外部工具来获取源代码。代码是：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My App</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <style type="text/css">
        #PageSource {
            height: 367px;
            width: 62%;
        }
        .auto-style1 {
            width: 287px;
        }
        .auto-style2 {
            width: 389px;
        }
    </style>
</head>
<body>

  <h1 style="text-align:center">My App</h1>
<form method="get" name="pageform" action="http://www.iwebtool.com/tool/tools/code_viewer/code_viewer.php"  target="pageframe" onsubmit="return validate(this);"><table border="0" style="border-collapse: collapse" width="100%"><tr>
<td width="956" height="91" valign="top"><br />
<table style="border-collapse: collapse" width="100%" class="tooltop" height="76"><tr>
<td><br />
<table border="0" style="border-collapse: collapse" width="100%" cellspacing="5"><tr>
<td height="28" class="auto-style1">Enter the website address :</td>
<td height="28" class="auto-style2"><br />
<font size="1">http://</font><input type="text" name="domain" size="26"></td>
<td height="28" width="391"><br />
<input type="submit" value="View!" style="float: left"></td>
</tr>
<tr>
<td height="21" class="auto-style1">&nbsp;</td>
<td width="691" colspan="2" height="21" align="top"><font size="1"></font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="956"><br />
<iframe name="pageframe" class="toolbot" frameborder="0" id="PageSource"><br />
</iframe></td>
</tr>
</table>
</form>
    <script language="JavaScript">
                   function validate(theform) {
                       if (theform.domain.value == "") { alert("No Domain"); return false; }
                       return true;
                   }

<br />
</body>
</html>

现在，源代码已成功显示在 Web 应用程序中，并且它使用 iframe 来显示源代码。我现在想找到一种方法来搜索包含在 iframe 中的源代码中的标签。

我是否应该将 iframe 中的内容加载到 div 以使搜索成为可能？或者有没有其他方法可以完成搜索？

请帮忙！

【问题讨论】：

如果 iframe 域与您的应用程序域相同，则可能，否则您必须以某种方式将其放入您的域，然后才能读取 DOM
有什么建议吗？
这意味着您将只能访问您自己域中的 iframe 中的元素，因此如果 iframe src 属性不在您的同一域中，它将失败被“查询”，因为这将是一个跨域请求。
我正在使用在线工具将另一个域中的网页源加载到我的网页中。这是否意味着 iframe 内容在 iWebTool 的域中？
您说您正在使用工具来获取内容吗？所以只需将内容附加到某个 div 中，然后您就可以使用 jquery

标签： javascript jquery html asp.net iframe

【解决方案1】：

考虑按照您的建议将内容加载到 div 中。据我所知，如果我是正确的，你不能在 iframe 中“查询”元素。

jQuery/JavaScript: accessing contents of an iframe

Get HTML inside iframe using jQuery

How to access the content of an iframe with jQuery?

根据问题作者的要求：

我会创建一个代理 PHP/Python/Ruby/C#/whatever 脚本，以便从我自己的域中获取页面：

注意：我自己还没有尝试过，因为这对我来说是不可能的，但是嘿，你可以稍后尝试。考虑更改 div 结构的表。在 HTML 代码中，您应该将 /path/to/my-script.php 字符串替换为 PHP 脚本的路径。

安全提示：以下代码有潜在危险，请小心。

PHP 示例：

<?php

echo file_get_contents($_POST["url"]);

然后我将只 AJAX 我自己的服务：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>My App</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico" />

  <style type="text/css">
    #PageSource {
      height: 367px;
      width: 62%;
    }
    .auto-style1 {
      width: 287px;
    }
    .auto-style2 {
      width: 389px;
    }
  </style>
</head>
<body>

  <h1 style="text-align:center">My App</h1>
  <form method="post" id="pageform" name="pageform" action="/path/to/my-script.php" ><table border="0" style="border-collapse: collapse" width="100%"><tr>
    <td width="956" height="91" valign="top"><br />
      <table style="border-collapse: collapse" width="100%" class="tooltop" height="76"><tr>
        <td><br />
          <table border="0" style="border-collapse: collapse" width="100%" cellspacing="5"><tr>
            <td height="28" class="auto-style1">Enter the website address :</td>
            <td height="28" class="auto-style2"><br />
              <font size="1">http://</font><input type="text" name="domain" size="26"></td>
              <td height="28" width="391"><br />
                <input type="submit" value="View!" style="float: left"></td>
              </tr>
              <tr>
                <td height="21" class="auto-style1">&nbsp;</td>
                <td width="691" colspan="2" height="21" align="top"><font size="1"></font></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width="956"><br />
          <div style="width:956px;" id="loaded-div"></div>
        </tr>
      </table>
    </form>

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
      function validate(theform) {
       if (theform.domain.value == "") { alert("No Domain"); return false; }
       return true;
     }

     $('#pageform').on('submit', function(){
      if (!validate(this))
        return false;


        $.ajax({
          url: this.action,
          type: this.method,
          data: { url: this.domain.value },
        })
        .done(function(data) {
          console.log("It worked, so we load the data into the div:");

          $('#loaded-div').html(data);

          // If I'm correct, you should now be able to access the elements in the div: eg. access textboxes in the document
          var $textbox = $('#loaded-div').find('input[type="text"]');

          // doSomethingWithText($textbox.val());
          // etc
        })
        .fail(function(data) {
          console.log(data);
          console.log("Something wrong happened. Alert user.");
        });

        return false;
    });
  </script>
</body>
</html>

【讨论】：

你能帮我用代码将 iframe 中的内容加载到 div 中吗？
我将能够在大约 1-2 小时内发布代码。我现在很忙。
更新了，试试看。
非常感谢您的帮助。我正忙于别的事情。我今天会试一试，然后告诉你结果......再次Tnx
@MidhunT，小心，不要将其发布到生产站点，因为 PHP 脚本只会从任何资源中获取内容，例如系统中的本地文件。我还更新了 HTML 文档，在表单中添加了一个 ID 属性。