Question

我想动态更改iframe中提到的宽度和高度，因此在textarea中。为此，我使用两个输入文本并尝试实时恢复值。另外，我希望在宽度或高度的值发生变化时保持比率。

HTML

<form id="generation_lien" action="/">
   <textarea id="embed_code" readonly="readonly"></textarea>
   <label>Size :</label>
   <input id="width_iframe" type="text" value="640" />
   <span>×</span>
   <input id="height_iframe" type="text" value="360" />
   <span>pixels</span>
</form>

的jQuery

function calculateFrameWidth(){return $('#width_iframe').val();}
function calculateFrameHeight(){return $('#height_iframe').val();}
$("#width_iframe").keyup(function()
{
   widthIframe = calculateFrameWidth();
   /*heightIframe = widthIframe / 1.77777778;*/
});
$("#height_iframe").keyup(function()
{
  heightIframe = calculateFrameHeight();
  /*widthIframe = heightIframe * 1.77777778;*/
});
var widthIframe = calculateFrameWidth();
var heightIframe = calculateFrameHeight();
document.getElementById('embed_code').innerHTML = '<iframe id="iframe_link" src="mysite/iframe.php" width="'+widthIframe+'" height="'+heightIframe+'></iframe>';

Answer 1

您可以通过将iFrame的宽度/高度更改为您想要的任何值来实现此目的，如下所示：

$("#embed_code").css({
  width: widthIframe,
  height: heightIframe
});

Answer 2

就keyup事件而言，您可以使用以下代码。

$("#width_iframe").on('keyup',function()
{
    alert("Width");
  widthIframe = calculateFrameWidth();
  /*heightIframe = widthIframe / 1.77777778;*/
});

$("#height_iframe").on('keyup',function()
{
 alert("Height");
  heightIframe = calculateFrameHeight();
  /*widthIframe = heightIframe * 1.77777778;*/
});

Answer 3

您可以按Width / Height计算尺寸比率。

＆＃13;

var firstWidth = $("#width_iframe").val();
var firstHeight = $("#height_iframe").val();
var ratio = firstWidth / firstHeight;
setSize(firstWidth, firstHeight);

$("#width_iframe").on("keyup change", function(){
    var width = $(this).val();
    $("#height_iframe").val(width / ratio);
    setSize(width, $("#height_iframe").val());
});

$("#height_iframe").on("keyup change", function(){
    var height = $(this).val();
    $("#width_iframe").val(height * ratio);
    setSize($("#width_iframe").val(), height);
});

function setSize(widthIframe, heightIframe){
    $("#embed_code").text('<iframe id="iframe_link" src="mysite/iframe.php" width="'+widthIframe+'" height="'+heightIframe+'"></iframe>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="embed_code" readonly="readonly" style="width:100%"></textarea>
<label>Size :</label>
<input id="width_iframe" type="text" value="640" />
<span>×</span>
<input id="height_iframe" type="text" value="360" />
<span>pixels</span>

＆＃13;

Answer 4

我尝试从代码中更改最小值。如果要更新保持配给的值，则需要存储先前的值。我通过在textarea上创建data-prev-width / height属性在updateTextAreaContent上执行此操作。我认为你的代码几乎是正确的，除非你每次键盘发生时都没有调用updateTextAreaContent。干杯：）

＆＃13;

function calculateFrameWidth() {
  return parseFloat($('#width_iframe').val());
}

function calculateFrameHeight() {
  return parseFloat($('#height_iframe').val());
}

function updateWidthAndHeight(width, height) {
  $('#width_iframe').val(width);
  $('#height_iframe').val(height);
}

function getPrevWidthAndHeight() {
  return {
    width: parseFloat($('#embed_code').attr("data-prev-width")),
    height: parseFloat($('#embed_code').attr("data-prev-height"))
  }
}

$("#width_iframe").keyup(function(e) {
  console.log(e);

  widthIframe = calculateFrameWidth();
  heightIframe = calculateFrameHeight();
  var prevWidthAndHeight = getPrevWidthAndHeight();
  var newHeight = widthIframe / prevWidthAndHeight.width * heightIframe;
  console.log(prevWidthAndHeight);
  updateWidthAndHeight(widthIframe, newHeight);
  updateTextAreaContent();
  /*heightIframe = widthIframe / 1.77777778;*/
});

$("#height_iframe").keyup(function(e) {

  widthIframe = calculateFrameWidth();
  heightIframe = calculateFrameHeight();
  var prevWidthAndHeight = getPrevWidthAndHeight();
  var newWidth = heightIframe / prevWidthAndHeight.height * widthIframe;
  console.log(prevWidthAndHeight);
  updateWidthAndHeight(newWidth, heightIframe);
  updateTextAreaContent();
  /*widthIframe = heightIframe * 1.77777778;*/
});

function updateTextAreaContent() {
  var widthIframe = calculateFrameWidth();
  var heightIframe = calculateFrameHeight();
  $('#embed_code').attr("data-prev-width", widthIframe);
  $('#embed_code').attr("data-prev-height", heightIframe);
  document.getElementById('embed_code').innerHTML = '<iframe id="iframe_link" src="mysite/iframe.php" width="' + widthIframe + '" height="' + heightIframe + '"></iframe>';
}

//init textarea
updateTextAreaContent();

＆＃13;

#embed_code {
  width: 550px;
  height: 50px;
  margin-top: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="generation_lien" action="/">
  <textarea id="embed_code" readonly="readonly"></textarea>
  <label>Size :</label>
  <input id="width_iframe" type="text" value="640" />
  <span>×</span>
  <input id="height_iframe" type="text" value="360" />
  <span>pixels</span>
</form>

＆＃13;

当大小改变时，jQuery保持比率

4 个答案: