Question

我试图使用Jquery在iFrame上重新调整大小。

有一个input，用户在其中设置所需的宽度，然后我想为iFrame元素设置此宽度。

这是我写的代码：

$( document ).ready(function() {

    var width = 300;

    // Get the value of the input width box
    $( 'form#WidgetConfigurator_width' ).keyup(function() {
        alert("should get the innerHTML or text value here");
    });

    if ( width < 180 ) {
        width = 180;
    }

    if ( width > 500 ) {
        width = 500;
    }

    $('iframe#WidgetsContent').attr('width', width);
});

问题是alert从未显示，如果在首次加载页面时为iFrame设置了默认值。我一步一步地这样做，所以显示警报是了解我正确道路的第一步。

<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1">
    <div id="WidgetConfigurator">
        <div>
            <label for="WidgetConfigurator_width">Larghezza del widget</label>
            <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]">
        </div>
    </div>
</form>

这是iFrame：

的代码

<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="600"></iframe>

我想要实现的是在用户设置iframe中的宽度后调整input的大小（与配置Page plugin时的Facebook相同）

对此有何建议？谢谢！

Answer 1

首先请注意，您使用下面的代码调用了一个不存在的iframe：

$('iframe#WidgetsContent').attr('width', width);

在第一行之后，您将使用一个表单元素，该表单元素具有属性＆＃39; id =＆＃34; widgetConfigurator_width＆＃34;哪个也不存在。试试这个：

$( 'input#WidgetConfigurator_width' ).keyup(function() {
alert("should get the innerHTML or text value here");
});

祝你好运

Answer 2

你有错误的选择器形式#WidgetConfigurator_width它必须是形成#WidgetConfigurator_width，我认为你需要这样的代码

$( document ).ready(function() {

   
    // Get the value of the input width box
    $( 'form #WidgetConfigurator_width' ).keyup(function() {

       var w=parseInt( $(this).val())
	    if ( w< 180 ) {
             w= 180;
         }

       if ( w> 500 ) {
            w= 500;
         }
	
    $('iframe#WidgetContent').width(w)
    });

   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1">
    <div id="WidgetConfigurator">
        <div>
            <label for="WidgetConfigurator_width">Larghezza del widget</label>
            <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]">
        </div>
    </div>
</form>
<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="600"></iframe>

Answer 3

这里可能是您正在搜索的内容：

<input type="text" onkeyup="resize(event, $(this).val())" id="WidgetConfigurator_width" name="WidgetConfigurator[width]">

脚本：

var resize = function (e, w) {
  if (e.keyCode == 13) {
    $('iframe#WidgetsContent').prop('width', w);
  }
};

Answer 4

试试这个：

＆＃13;

$( document ).ready(function() {
	var width = 300;

	// Get the value of the input width box
	$('#WidgetConfigurator_width' ).on('keyup', function(event) {
		if (event.keyCode === 13) {
			width = ($(this).val().length) ? $(this).val() : width;
			if ( width < 180 ) {
				width = 180;
			}

			if ( width > 500 ) {
				width = 500;
			}

			$('#WidgetContent').animate({'width': width}, 100); 
		}
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="WidgetConfigurator" method="post" action="/widgets" id="WidgetConfigurator" _lpchecked="1">
    <div id="WidgetConfigurator">
        <div>
            <label for="WidgetConfigurator_width">Larghezza del widget</label>
            <input type="text" id="WidgetConfigurator_width" name="WidgetConfigurator[width]">
        </div>
    </div>
</form>
<br />
<iframe id="WidgetContent" src="http://127.0.0.1:8000/widget/1" frameborder="0" height="100"></iframe>

＆＃13;

JQuery：在用户输入值后获取输入的值

4 个答案: