使用查詢將widht和height字段的值分配給iframe

Question

如何使用jQuery將輸入字段的寬度和高度分配給Iframe。

所有我想分配iframe的寬度和高度作爲輸入字段中的值。 請看看這段代碼，這是我到目前爲止所嘗試過的。

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

<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>

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

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

}）

使用此

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

Answer 3

我已經在這裏演示：

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); 
})