javascript - 使用 iframe 中的输入字段作为 Jquery 事件的触发器

Question

通过这个很棒的论坛，我设法找到了通过点击 HTML 和 Jquery 来扩展 iframe 的解决方案。

但是并没有完全解决我的问题。我现在在哪里设法使用文本扩展 iframe，但我想使用 iframe 中的输入字段作为函数的触发器。 我找到了 this thread关于如何使用 iframe 窗口本身作为触发器，它似乎使用这个插件 (iFrame Tracker):https://github.com/vincepare/iframeTracker-jquery

遗憾的是，这似乎不适用于移动设备或其他触摸设备。因此，单击输入字段将是最佳解决方案。

这就是我现在使用的简单文本，单击时会扩展 iframe 的高度:

HTML:

<iframe class="frame" iframe id="bestillframe" 
src="iframe source goes here" 
height="200px" width="200px"></iframe>   
<div id=kilden>
Click here to enlarge the iframe
</div>

Javascript:

$(function(){
    $('#kilden').click(function(){
    $('#bestillframe').animate({'height':'300'})  
    })
});

摆弄 iframe 链接和提到的输入字段。 http://jsfiddle.net/b6qfJ/51/

有谁知道我如何通过点击输入字段来让它工作？

Answer 1

感谢@zer00ne 的大力帮助，我设法解决了这个问题。 唯一的问题是上面的部分似乎在没有正确格式化的情况下自动与 iframe 一起缩放。这会导致一个问题，即 iframe 下面的所有元素都会重叠，并且不会相应地向下移动。 解决方案是给该部分一个 ID，并在扩展函数中添加另一个 .animate 函数，以便它们同时被触发。不确定这是否是正确的方法，但它确实有效。然后解决方案是

解决方案

Javascript

$(function() {
  $('section').on('click', expand);
});

function expand(e) {
  $('#ramme').animate({
    'height': '300'
  })
   $('#iframe').animate({
    'height': '300'
  }).css('pointer-events', 'auto');
  $('section').off('click', expand);
}

HTML

<section id=ramme>
  <iframe id="iframe" src="iframe source goes here" height="200" 
width="900" scrolling="no";></iframe>
</section>

CSS

section {
  position: relative;
  height: 200px;
  width:600px;
  padding: 0;
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

演示 从 fiddle : http://jsfiddle.net/b6qfJ/92/

这是一个很棒的论坛。谢谢!