3

我有一个项目来过滤 100k-200k 的网站，通过在 iframe 上查看来收集网站所有者的姓名和电子邮件。我真正需要的是，如果我在我查看的网站上单击/选择名称，它会自动填写名称输入表格，电子邮件也是如此。

有人知道解决方案吗？任何回应将不胜感激。

*如果您需要我的代码，请告诉我，我会放在这里。不过，它只是一个带有<iframe>and的 html 页面<form>。

这是代码：

<div class="container container-harvester">
  <div class="harvester-form">
    <%= form_for(:harvesters, :html => {:class => "form-horizontal"}) do |f| %>
        Name: <%= f.text_field :name %>
        Email: <%= f.text_field :email %>
        <%= f.hidden_field :website, :value => "", :class => "website-harvester" %>
        <%= f.hidden_field :skipped, :value => "true" %>
        <%= f.submit "Submit", :class => "btn btn-primary submit-harvester", "data-disable-with" => "Saving..." %>
        <a href="#" class="delete-website btn btn-danger" data-id="">Delete</a>
    <% end %>
  </div>

  <div class="harvester-iframe">
    <iframe name="harvester-iframe" data-id="<%= @websites.first.id %>" src="<%= @websites.first.url %>" frameborder="0">
    </iframe>
  </div>

  <div class="harvester-link">
    <ul>
      <% @websites.each do |w| %>
        <% unless @registered.collect(&:website).include?(w.url) %>
          <li><a class="" href="<%= w.url %>" target="harvester-iframe" data-id="<%= w.id %>"><%= w.url %></a></li>
        <% end %>
      <% end %>
    </ul>
  </div>
</div>

<% content_for :unobtrusive_js do %>
  <script type="text/javascript">
    $(document).ready( function() {
      $('.harvester-link a').on('click', function (e) {
        var url = $(this).attr('href')
          , id = $(this).attr('data-id')
          , $el = $(e.currentTarget);
        $('.harvester-iframe iframe').attr('src', url);
        $('.harvester-iframe iframe').attr('data-id', id);
        $('.website-harvester').attr('value', url);
        $('.delete-website').attr('data-id', id);
        $('.submit-harvester').attr('data-id', id);

        $('.harvester-link a').removeClass('active');
        $el.addClass('active');
      });
      $('.harvester-iframe iframe').on('load', function (e) {
        var url = $(this).attr('src')
          , id = $(this).attr('data-id')
          , $el = $(e.currentTarget);
        $('.delete-website').attr('value', url);
        $('.delete-website').attr('data-id', id);
        $('.website-harvester').attr('value', url);
        $('.submit-harvester').attr('data-id', id);
      });
      $('.delete-website').on('click', function (e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        API.delete(Routes.harvester_website_path(id)).done(function (response) {
          window.location.reload();
        });
      })
      $('.submit-harvester').on('click', function (e) {
        var id = $(this).attr('data-id');
        API.delete(Routes.harvester_website_path(id)).done(function (response) {
          window.location.reload();
        });
      })
    });
  </script>
<% end %>
4

1 回答 1

1

您的第一个问题是 Javascript ( http://en.wikipedia.org/wiki/Same-origin_policy )的同源策略。因此，您必须将内容从那一侧获取到您的服务器，例如使用 PHP file_get_contents()。所以你可以在你的 iframe 中显示这个 php 并作为获取 url。

<iframe src="get_content.php?url=THE_URL"></iframe>

您的 get_content.php 可能如下所示：

<?php
echo file_get_contents( $_GET["url"] );
?>

要获取您在此 iframe 中选择的内容，此解决方案可能会有所帮助： 如何使用 javascript 从 iframe 获取所选文本？

iframe 可能看起来不像它的起源，但在大多数情况下应该可以正常工作。

要自动分隔，如果您现在选择了名称或电子邮件，请查看 Javascript 正则表达式，尤其是match()-Function： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/字符串/匹配

希望这可以帮助。

于 2013-10-02T08:00:34.630 回答