如何基于用户输入生成HTML并在Flask应用中新标签页打开

Got it, let's work through this! You've got a Flask setup where users input content, your get_html function spits out the target HTML, but you can't get that content to pop open in a new tab. Here are three straightforward solutions depending on your use case:

1. Use target="_blank" on Your Form (Simplest Approach) #

This is the easiest fix if you're using a form to collect user input. Just add the target="_blank" attribute to your form tag—this tells the browser to open the response from your Flask route in a new tab automatically.

Example Code: #

Flask Routes:

from flask import Flask, request, make_response
from markupsafe import escape  # Important for XSS protection!

app = Flask(__name__)

def get_html(user_input):
    # Your simulated external tool function—escape input to prevent XSS
    safe_input = escape(user_input)
    return f"""
    <html>
        <head><title>Generated Content</title></head>
        <body>
            <h2>Your Input:</h2>
            <p>{safe_input}</p>
        </body>
    </html>
    """

@app.route('/')
def home():
    # Since you can't use render_template, return the form directly as HTML string
    return """
    <form action="/generate" method="POST" target="_blank">
        <label for="user_input">Enter your content:</label>
        <input type="text" id="user_input" name="user_input" required>
        <button type="submit">Generate & Open in New Tab</button>
    </form>
    """

@app.route('/generate', methods=['POST'])
def generate():
    user_input = request.form.get('user_input', '')
    html_output = get_html(user_input)
    # Return the generated HTML with correct content type
    response = make_response(html_output)
    response.headers['Content-Type'] = 'text/html'
    return response

if __name__ == '__main__':
    app.run(debug=True)

When the user submits the form, the browser will open the generated HTML in a new tab automatically—no extra work needed.

2. Use JavaScript to Fetch & Open HTML Asynchronously #

If you want to avoid reloading the main page, you can fetch the generated HTML via JavaScript, then open it in a new tab manually. This works great for more interactive UIs.

Example Code: #

Updated Home Route (Frontend):

@app.route('/')
def home():
    return """
    <div>
        <label for="user_input">Enter your content:</label>
        <input type="text" id="user_input" required>
        <button onclick="generateAndOpen()">Generate & Open in New Tab</button>
    </div>

    <script>
        async function generateAndOpen() {
            const input = document.getElementById('user_input').value;
            const response = await fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `user_input=${encodeURIComponent(input)}`
            });
            const htmlContent = await response.text();

            // Open a new tab and write the HTML content
            const newTab = window.open('', '_blank');
            newTab.document.write(htmlContent);
            newTab.document.close(); // Finalize the document
        }
    </script>
    """

Your /generate route stays exactly the same as in the first example. Note: Browsers might block popups if this isn't triggered by a direct user click (like a button press), so stick to user-initiated actions here.

3. Save HTML to Static File & Redirect #

If your generated HTML is large or needs to be accessible later, you can save it as a static file in Flask's static folder, then redirect to it. Again, use target="_blank" on the form to open the redirect in a new tab.

Example Code: #

Updated Generate Route:

import os
from flask import redirect, url_for

@app.route('/generate', methods=['POST'])
def generate():
    user_input = request.form.get('user_input', '')
    html_output = get_html(user_input)

    # Create a unique filename to avoid overwrites
    filename = f"generated_{hash(user_input)}.html"
    static_path = os.path.join(app.static_folder, filename)

    # Write the HTML to the static folder
    with open(static_path, 'w') as f:
        f.write(html_output)

    # Redirect to the static file—form's target="_blank" opens it in new tab
    return redirect(url_for('static', filename=filename))

Important Note: Make sure to sanitize filenames if you're using user input to generate them, to prevent path traversal attacks. Using a hash like above is a safe way to avoid conflicts and malicious paths.

Key Tips: #

• XSS Protection: Always escape user input (we used markupsafe.escape in the examples) to prevent cross-site scripting attacks.
• Popup Blockers: Browsers block automatic popups, so always tie the new tab action to a direct user interaction (button click, form submit).

内容的提问来源于stack exchange，提问作者Cleb