Question

我想运行一个烧瓶应用程序，用户可以在其中提供一些用户输入，用于创建HTML页面，然后将其显示在新选项卡中。 HTML是使用外部工具创建的（这里由函数get_html模仿，它实际上将用户输入作为参数），所以我不能只使用我渲染的模板（我认为）。

我已经可以接受用户输入并创建我想要显示的HTML，但是，我还没有设法为它打开一个新标签。如何实现这一目标？

这是我的代码：

from __future__ import print_function, division

from flask import Flask, render_template, request, jsonify
import json

# Initialize the Flask application
app = Flask(__name__)


@app.route('/html_in_tab')
def get_html():

    # provided by an external tool 
    # takes the user input as argument (below mimicked by a simple string concatenation)

    return '<!DOCTYPE html><title>External html</title><div>Externally created</div>'


@app.route('/_process_data')
def data_collection_and_processing():

    # here we collect some data and then create the html that should be displayed in the new tab
    some_data = json.loads(request.args.get('some_data'))

    # just to see whether data is retrieved
    print(some_data)

    # oversimplified version of what actually happens; get_html comes from an external tool
    my_new_html = get_html() + '<br>' + some_data
    print(my_new_html)

    # this html should now be displyed in a new tab
    return my_new_html


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':

    app.run(debug=True)

index.html如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Get new tab!</h3>
      </div>
      <button type="button" id="process_input">Process!</button>

      <a href="/html_in_tab" class="button" target='_blank'>Go to results</a>

    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {

        // clicking the button works fine: data is processed correctly
        $('#process_input').bind('click', function() {
            $.getJSON('/_process_data', {
                some_data: JSON.stringify('some data')

            });
          // can this be changed to show the processed html?
          window.open("/html_in_tab", "_blank");
          return false;

        });
      });
    </script>
  </body>
</html>

因此，现在window.open部分会打开一个新标签，但它应显示my_new_html，即data_collection_and_processing新创建的HTML。我怎样才能做到这一点？

Answer 1

目前，您只需在端点"/html_in_tab"处打开一个新窗口，该窗口将点击get_html()的Flask路线并显示标准HTML而无需用户输入。

您可以尝试的一种方法是打开一个新窗口并使用更新的内容设置文档正文innerHTML：

<script type="text/javascript">                                             
  $(document).ready(function() {                                            

    $('#process_input').bind('click', function() {                          

        $.get('/_process_data', {                                           

            some_data: JSON.stringify('some data'),                         

        }).success(function(data) {                                         

                var win = window.open("", "_blank");                        
                win.document.body.innerHTML = data;                         

        })                                                                  

        return false;                                                       

    });                                                                     
  });                                                                       
</script>

Answer 2

更改您的html，如下所示：

<dom-module id="custom-style">
  <template>
    <style>
      <!-- Your shared styles -->
    </style>
  </template>
</dom-module>

和Python脚本如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Get new tab!</h3>
      </div>
      <button type="button" id="process_input">Process!</button>

      <a href="/html_in_tab" class="button" target='_blank'>Go to results</a>

    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {

        // clicking the button works fine: data is processed correctly
        $('#process_input').bind('click', function() {
            $.getJSON('/_process_data', {
                some_data: JSON.stringify('some data')

            }); 
          // can this be changed to show the processed html?
          window.open("/process_data", "_blank");
          return false;

        });
      });
    </script>
  </body>
</html>

如何使用用户输入创建html并将其显示在新选项卡中？

2 个答案: