如何使用用户输入创建html并将其显示在新标签中? [英] How to create html using user input and display it in a new tab?
问题描述
我想运行一个flask应用程序，用户可以在其中提供一些用户输入，这些输入用于创建HTML页面，然后将其显示在新选项卡中.HTML是使用外部工具创建的(这里被模拟为 get_html 的函数，该函数实际上将用户输入作为参数)，所以我不能仅使用我渲染的模板(我认为).
I would like to run a flask application where the user can provide some user input which is used to create a HTML page which should then be displayed in a new tab. The HTML is created using an external tool (here mimicked by the function get_html which actually takes the user input as argument), so I cannot just use a template which I render (I think).
我已经可以接受用户输入并创建想要显示的HTML，但是，我也没有设法为其打开新标签.如何实现?
I can already take the user input and create the HTML I would like to see displayed, however, I did not manage to also open a new tab for it. How can this be achieved?
这是我的代码:
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.我该如何实现?
So, now the window.open part opens a new tab, but it should display my_new_html, the newly created HTML by data_collection_and_processing. How can I achieve that?
推荐答案
此刻，您只是在端点"/html_in_tab" 处打开一个新窗口，这将使Flask路线进入 get_html()并显示没有用户输入的标准HTML.
At the moment you're just opening a new window at the endpoint "/html_in_tab" which will hit the Flask route for get_html() and show the standard HTML with no user input.
您可以尝试的一种方法是打开一个新窗口，并使用更新后的内容设置文档正文innerHTML:
One method you could try is to open a new window and set the document body innerHTML with the updated content:
<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>
这篇关于如何使用用户输入创建html并将其显示在新标签中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
