0

したがって、値またはテキスト入力を受け取り、iframe の src 属性に渡すこの小さな関数があります。それは私のcodepenでうまくいくようですが、（すべてのファイルなど（codepenスタイル）で（jqueryとすべてが適切にロードされている）エクスポートしてサーバーに置くと、うまくいきません。これはなぜなのか? または、これをより良い方法で行うにはどうすればよいか? --

これは、それがあなたにとって何か意味がある場合、クロムのライブバージョンで送信時にURLバーに表示されるものです. http://site.com/?url-input=http%3A%2F%2Fmy-site.com

実用的なコードペン

HTML

<form class="visitor-input-form">
  <label for="url-input" >
    Type in your current URL and see what your website looks like to almost everyone else.
  </label>
  <input type="text" name="url-input" 
         class="currentUrl" 
         placeholder="http://nouveau.io" id="txtSRC" />

  <input type="submit" class="submit-button" value="View site" />
</form>

jQuery

$(".submit-button").click( function() {
  $(".i-frame").attr("src", $("#txtSRC").val());
});

御時間ありがとうございます。

アップデート：

さらにテストするために、これを使用しています。ページが読み込まれ、DOM の準備ができていることがわかります。したがって、すべてが順番にロードされます。次に、URLを入力すると、ボタンが押されたことがわかります.THEN-DOMの準備ができていることがわかります。したがって、Enter キーを押すと、ページがリロードされます。ページをリロードしたくありません。iframe を切り替えたいだけです。したがって、これは少なくとも問題の原因を突き止めるための小さな窓です。

jQuery( document ).ready(function($) {

    alert("dom is ready");

    $(".submit-button").click( function() {

    alert("button was pushed");

        $(".i-frame").attr("src", $("#txtSRC").val());

    });
}); // end dom ready
4

3 に答える 3

1

要素がページに既に存在する後、ドキュメントの最後で jQuery を実行するか、ドキュメントの準備が整った呼び出し内のヘッドで jQuery を実行してください。

$(document).ready(function () {
    $(".submit-button").click(function () {
        $(".i-frame").attr("src", $("#txtSRC").val());
    });
});

Codepen は前者を行います。

于 2013-11-04T19:57:33.710 に答える
0

ページが再読み込み中です。jQuery を次のように更新してみてください。

jQuery( document ).ready(function($) {

    $(".submit-button").click( function(e) {
        e.preventDefault();

        $(".i-frame").attr("src", $("#txtSRC").val());

    });
});
于 2013-11-04T23:25:08.000 に答える
0

これが見つかりました：

フォーム送信後のページのリロードを防止します。(アヤックスなし)

<form onsubmit="return false">

トリックはしますが、より良い答えがあると感じています。送信時に、クリックではなくスクリプトを実行する必要があるように感じます。私はそれを調べるつもりです。<form onsubmit="script">など...もっと適切なものが得られることを期待して、これを回答済みとしてマークする前にしばらく待ちますが、現在は意図したとおりに機能しています。

于 2013-11-04T22:02:23.613 に答える