Question

所以我有这个小函数，它接受值或文本输入并将其赋予iframe的src属性。它似乎在我的codepen上工作得很好，但是当我导出它（包含所有文件等（codepen样式）（jquery并且所有内容都正确加载）并将其放在服务器上时，它不起作用。有没有人有任何想法为什么会这样？或者我怎么能以更好的方式解决这个问题？ -

如果这对您来说意味着什么，这就是使用chrome中的实时版本提交的网址栏中显示的内容。 http://site.com/?url-input=http%3A%2F%2Fmy-site.com

A working codepen

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准备好了。所以一切都按顺序加载。然后我输入了网址，它告诉我按钮被按下了，那么 - 它告诉我dom已经准备好了。所以，当我按下回车键时，它正在重新加载页面。我不希望页面重新加载。我只想让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

Answer 1

确保您在文档末尾执行jQuery，在页面中已存在元素后执行jQuery，或者在文档就绪调用中执行头文件：

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

Codepen做前者。

Answer 2

我们发现了这个：

Prevent reloading page after submiting form. ( no ajax )

<form onsubmit="return false">

诀窍，但我觉得有更好的答案。我觉得在提交时，它应该运行脚本而不是点击。我要调查一下。 <form onsubmit="script">等等......我等待一段时间后才将其标记为希望得到更合适的答案，但目前正在按预期工作。

Answer 3

页面正在重新加载，请尝试将jQuery更新为：

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

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

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

    });
});

简单的jQuery函数在codepen中工作但不在服务器上：

HTML

的jQuery

感谢您的时间。

更新

3 个答案: