Flask+HTML双框架页面表单提交结果指定框架展示的实现与问题求助

Hey there! Let's fix that frame targeting issue you're having—it's actually a quick fix with a single HTML attribute.

The Core Problem #

Right now, your form is defaulting to loading the response in the same frame it's submitted from (the top one). To route the results to the bottom frame, we just need to tell the form exactly where to send the output.

• Ensure Your Bottom Frame Has a Named Identifier
  First, check your main index page's frame setup. Make sure your bottom frame has a name attribute (this is what we'll target). For example, if you're using iframes:

  <!-- In your index page's frame container -->
  <iframe class="top-frame" src="/your-form-page" name="topFormFrame"></iframe>
  <iframe class="bottom-frame" name="resultsDisplayFrame"></iframe>
  

  If you're using div-based frames (unlikely, but possible), you'd need AJAX instead, but let's stick with the iframe scenario since your description points to that.

• Add the target Attribute to Your Form
  In the HTML of your top frame's form, add the target attribute set to the exact name of your bottom frame. This tells the browser to load the form's response into that frame instead of replacing the form:

  <form action="/your-python-processing-route" method="POST" target="resultsDisplayFrame">
      <!-- All your form inputs go here -->
      <label for="query">Enter Query:</label>
      <input type="text" id="query" name="query">
      <button type="submit">Submit</button>
  </form>
  

• Confirm Your Flask Backend Handles It Correctly
  Your Python/Flask route just needs to return the results template as normal—no extra changes needed here. For example:

  @app.route('/your-python-processing-route', methods=['POST'])
  def process_form():
      query = request.form.get('query')
      # Do your processing here (DB query, etc.)
      results = your_processing_function(query)
      # Render your results template, which will load in the bottom frame
      return render_template('results.html', results=results)
  

Quick Checks to Avoid Mistakes #

• Make sure the target value matches the frame's name exactly (it's case-sensitive!)
• Don't use redirects in your Flask route—redirects will ignore the target attribute and load in the top frame instead. Just return the results template directly.
• If you're using a flexbox layout like your snippet shows, ensure your frames have proper height/width settings so the bottom frame is visible.

That's it! Once you add the target attribute to your form, submitting it will keep the top frame's form intact and load all results in the bottom frame.

备注：内容来源于stack exchange，提问作者Nish