0

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

如果这对您有任何意义，这就是使用 chrome 实时版本提交时在 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，它告诉我按钮被按下，然后 - 它告诉我 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
4

3 回答 3

1

确保在文档末尾、页面中已经存在元素之后或在文档就绪调用的头部执行 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 回答