Назначьте значение полей widht и height в iframe, используя запрос

Question

Назначьте значение полей widht и height в iframe, используя запрос

1

Как назначить ширину и высоту полей ввода для Iframe с помощью jQuery.

Все я хочу назначить ширину и высоту 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>

Khirad Banu 19 сен. 2017, в 09:03

Источник

Теги:

javascript

iframe

3 ответа

Ещё вопросы

Hassaan · Answer 1 · 2017-09-19T05-14-00.000Z

Самый простой способ: присваивать уникальный идентификатор <textarea> и обновлять весь код iframe через jquery.

Меняться от

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

Rene Lykke Dahl · Answer 2 · 2017-09-19T04-11-00.000Z

Я сделал демо-версию здесь:

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

Привет, мое решение помогло тебе?

RHAN BARREDO · Answer 3 · 2017-09-19T04-01-00.000Z

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

})

Использовать этот

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