Question

这是this one的后续问题。

目标是使用一些转换为HTML文档的用户输入，该文档应显示在新选项卡中（在上面的链接中已回答）。

然而，问题是 - 如果HTML文档包含<script>标记 - 当此HTML字符串作为JSON传递时，不会执行这些标记。下面我使用一个简单的字符串：

'<!DOCTYPE html><title>External html</title><div>Externally created</div><script>alert("WORKING");</script>'

这是一个用于说明问题的最小示例（当您从下面加载HTML时，您将在浏览器中看到此内容）：

当我点击按钮时，会打开新标签，但不会执行脚本，即没有显示警告。通过单击alert链接，可以直接加载html字符串并正确显示警报。

我的问题是，如何对从.getJSON返回的HTML字符串进行后处理以正确执行脚本。目前我这样做（整个代码可以在下面找到）：

$.get('/_process_data', {

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

            }).success(function(data) {

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

            })

这是我的代码：

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

      <a href="/html_in_tab" class="button" target='_blank'>alert</a>

    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <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>
  </body>
</html>

和烧瓶文件：

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><script>alert("WORKING");</script>'


@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_new_tab.html')


if __name__ == '__main__':

    app.run(debug=True)

Answer 1

将HTML添加到页面后，您可以执行一个函数来运行它。这需要使用以下函数包装脚本：

function onStart() {
    // Your code here
}

然后在将HTML添加到页面后，运行以下函数：

$.get('/_process_data', {

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

}).success(function(data) {

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

Answer 2

而不是......

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

使用jquery加载html并等待加载完成：

$.get('/_process_data', {

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

}).success(function(data) {

    var w = window.open("", "_blank");
    $(w.document.body).load(data, function () {
        //execute javascript here 
    });

})

通过JSON

2 个答案: