这是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>
和 flask 文件:
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)
最佳答案
我认为你需要这样的东西:
var win = window.open("", "_blank",);
win.document.write('<!DOCTYPE html><title>External html</title><div>Externally created</div><script>(function(){alert(1);})();</script>');
当您打开弹出窗口时，它将执行 JavaScript。您可以在 <script>(function(){alert(data);})();</script> 中添加数据并做任何您想做的事情
关于javascript - 通过 JSON 传递时，HTML 字符串中的脚本不会被执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50300189/