1

ユーザーが任意の URL を入力するための入力ボックスがあります。次に、送信をクリックした後、Web サイトを iframe に表示したいと思います。

<html>
    <head>
        <title></title>
        <style>
            #netframe {
                float:right; 
                height: 100%; 
                width: 80%;
            }

            #sidebar {
                float:left; 
                height: 100%; 
                width: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Enter A URL:
                <input type="text" name="url" id="url">
                <input type="button" value="load" id="load">
                <br><br>    
            </div>
            <div id="netframe">
                <iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
            </div>
        </div>
    </body>
</html>

これは私がオンラインで見つけた最も近いものですが、何もしません: How To Reload A iframe Using jQuery

4

2 に答える 2

2

jsBin デモ

HTML:

<input type="text" id="url" name="url" value="http://" /> 
<iframe height="90%" width="100%" src="" id="frame"></iframe>

jQuery

$('input#url').on('input', function() {
  $('#frame').attr('src', this.value);
});
于 2012-09-25T00:44:48.197 に答える
0

次の JS / jQuery スクリプトをコードに追加してみてください。

<script>
    $(function() {
        $("#load").click(function() {
            var new_url = $("#url").val();

            // Checks that the user typed "http://" or not
            if(new_url.substr(0,7)!="http://")
                new_url = "http://"+new_url;

            $("#main_frame").attr("src", new_url);
        });
     });
</script>

したがって、コードは次のようになります。

<html>
    <head>
        <title></title>
        <script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style>
            #netframe {
                float:right; 
                height: 100%; 
                width: 80%;
            }

            #sidebar {
                float:left; 
                height: 100%; 
                width: 20%;
            }
        </style>
        <script>
            $(function() {
                $("#load").click(function() {
                    var new_url = $("#url").val();

                    // Checks that the user typed "http://" or not
                    if(new_url.substr(0,7)!="http://")
                        new_url = "http://"+new_url;

                    $("#main_frame").attr("src", new_url);
                });
             });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Enter A URL:
                <input type="text" name="url" id="url">
                <input type="button" value="load" id="load">
                <br><br>    
            </div>
            <div id="netframe">
                <iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
            </div>
        </div>
    </body>
</html>

PS: jQuery ライブラリをロードすることを忘れないでください。たとえば、ヘッダーに次を追加することで、Web からロードできます。

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

お役に立てれば。これがうまくいくかどうか教えてください。

于 2012-09-25T01:34:22.530 に答える