Question

如何使用jQuery将输入字段的宽度和高度分配给Iframe。

我只想在输入字段中将iframe的宽度和高度指定为值。请看看这个片段，这是我到目前为止所尝试过的。

＆＃13;

$("#widht_input").bind('keyup', function () {
      //  $("#frame").attr("width", "200");
        $("#frame").width(30);
})
         
$('.generate_code').click(function(){
  $('.embedcode').show();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<span data-toggle="modal" data-target="#embed-code">
 <a href="javascript:void(0)" data-toggle="tooltip" title="Embed Code"class="btn btn-xs btn-default">Generate</a></span>



<div id="embed-code" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Generate Shortcode</h3>
      </div>
      <div class="modal-body" id="modalbody">
        <div class="block">
          <div class="form-group">
            <label>Width</label>
            <input type="number" id="widht_input" name="width" class="form-control" placeholder="Enter width..">
          </div>
 
          <div class="form-group embedcode" style="display: none">
            <label for="example-nf-password">Embed Code</label>
            <textarea class="form-control" rows="6" placeholder="Enter height.."><iframe id="frame" width="560" height="315" src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>
           </textarea>
          </div>
  

          <div class="form-group form-actions">
            <button type="button" class="generate_code btn btn-sm btn-primary"><i class="fa fa-user"></i> Generate</button>
          
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

最简单的方法是，将唯一ID分配给<textarea>并通过jquery更新整个iframe代码。

从

改变

<textarea

向

<textarea id="iframe_code"

然后从

改变

$("#frame").width(30);

到

var width = $(this).val();
var iframe_code = '<iframe id="frame" width="'+width+'" height="315" src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>';
$('#iframe_code').val(iframe_code);

Answer 2

我在这里做了一个演示：

https://jsfiddle.net/aquadk/agg4kckb/8/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<span data-toggle="modal" data-target="#embed-code">
 <a href="javascript:void(0)" data-toggle="tooltip" title="Embed Code"class="btn btn-xs btn-default">Generate</a></span>



<div id="embed-code" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Generate Shortcode</h3>
      </div>
      <div class="modal-body" id="modalbody">
        <div class="block">
          <div class="form-group">
            <label>Width</label>
            <input type="number" id="widht_input" name="width" class="form-control" placeholder="Enter width..">
          </div>

          <div class="form-group embedcode" style="display: none">
            <label for="example-nf-password">Embed Code</label>
            <textarea id="EmbedCode" class="form-control" rows="6" placeholder="">
              <iframe id="frame" style="width: 300px;height:315px"  src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>
            </textarea>
          </div>
          <div style="display:none">
            <iframe id="frame" style="width: 300px;height:315px"  src="https://www.youtube.com/embed/_AZqZBzjI2I" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="form-group form-actions">
            <button type="button" class="generate_code btn btn-sm btn-primary"><i class="fa fa-user"></i> Generate</button>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

的javascript

$("#widht_input").bind('keyup', function() {
  $("#frame").width($("#widht_input").val());
})

$('.generate_code').click(function() {

  $('.embedcode').show();
  $('#EmbedCode').val($("#frame")[0].outerHTML);
})

Answer 3

$("#widht_input").bind('keyup', function () {
  //  $("#frame").attr("width", "200");
    $("#frame").width(30);

}）

使用此

$("#frame").css({"width":"30%","height":"10%"});

使用查询将widht和height字段的值分配给iframe

3 个答案: