写入iframe会导致浏览器使用不同的URL重新加载

Question

My markup is written as follows. 我的标记编写如下。 Pay more attention to the click handler of the uploadBtn button. 请更加注意uploadBtn按钮的点击处理程序。

<!DOCTYPE html>
<html>
  <head>
    <title>Cleansing Workbench</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>



<div class="container">
    <h1>Cleansing Workbench</h1>
    <h3>Upload File</h3>
    <form class="form-inline well">
        <label class="span3">Enter the file to upload</label><button id="uploadBtn" class="btn btn-default">...</button><label id="filename"></label>
        <br />
        <label class="span3">Enter Delimiter</label>
        <select name="delimiter" id="delimiter">
            <option value="comma">Comma</option>
            <option value="tab">Tab</option>
            <option value="pipe">Pipe</option>
            <option value="other">Other</option>
        </select>
        <label>Specify Delimiter</label>
        <input type="text" name="otherDelimiter" id="txtdelimiter" value="Comma (,)" />
        <br />
        <br />
        <div class="text-right">
            <input type="submit" class="btn btn-primary" value="Upload" />
        </div>

    </form>
    <iframe name="upload" id="upload" src="about:blank" style="display:none"></iframe>
</div>


    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        (function ($) {
            $.fn.toggleDisabled = function () {
                return this.each(function () {
                    var $this = $(this);
                    if ($this.attr('disabled')) $this.removeAttr('disabled');
                    else $this.attr('disabled', 'disabled');
                });
            };
        })(jQuery);

        $(function () {
            var arrDelimiterEnums = ['Comma (,)',
                'Tab Separated ( \\t )',
                'Pipe ( | )'];

            $txt = $('#txtdelimiter').toggleDisabled();

            $('#delimiter').change(function () {
                var obj = this;
                var indx = obj.selectedIndex;
                var val = obj.options[indx].value;
                if (val == 'other') {
                    $txt.val('').toggleDisabled();
                }
                else {
                    if (!$txt.attr('disabled'))
                        $txt.toggleDisabled();
                    $txt.val(arrDelimiterEnums[indx]);
                }
            });
            $('#upload').load(function () {                

            });

            $('#uploadBtn').click(function () {
                var ifr = document.getElementById('upload');
                var doc = ifr.contentWindow.document;
                if (doc.getElementById('uploader') == null) {
                    var frm = document.createElement('form');
                    frm.action = "fileupload.ashx";
                    frm.method = "post";
                    frm.id = 'uploader';

                    var inp = document.createElement('input');
                    inp.type = "file";
                    inp.name = 'uploadFile';
                    inp.id = 'uploadbtn';
                    var i = $(inp).click(function () {
                        console.log('hello');
                        console.log(this.value);
                    });
                    frm.appendChild(inp);
                    doc.body.appendChild(frm);
                    //i.trigger('click', null);
                }
                else {
                    var btn = doc.getElementById('uploadbtn');
                    $(btn).trigger('click', null);
                }                
            });
        });
    </script>

  </body>
</html>

As soon as the following line executes, the url in my browser gets appended with ?delimiter=comma . 一旦执行以下行，浏览器中的URL就会附加?delimiter=comma 。

doc.body.appendChild(frm);

I expected this would not reload. 我希望这不会重新加载。 So what do I do to not make it reload? 那我该怎么做才能不重新加载呢？

Answer 1

Take your inputs out of the form <form class="form-inline well"> & just manipulate them with jQuery or vanilla javascript. 将您的输入内容从<form class="form-inline well">取出，并仅使用jQuery或香草javascript对其进行操作即可。

When buttons are in a form they automatically "submit"/refresh the page. 当按钮采用某种形式时，它们会自动“提交” /刷新页面。

写入iframe会导致浏览器使用不同的URL重新加载

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-01-15 10:11:50

写入iframe会导致浏览器使用不同的URL重新加载

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-01-15 10:11:50

解决方案1
0 已采纳 2014-01-15 10:11:50