javascript - Javascript 库未在 window.open 选项卡上加载
问题描述
我有一个用 javascript 和 html 编写的单词匹配练习游戏。当用户单击添加更多时,add_more() 方法会向键和描述输入框添加一个新键、描述对。
预期:用户单击呈现 html,然后出现一个带有呈现 html 的新选项卡。用户应该能够将键拖放到描述中。
实际:用户单击呈现 html,然后出现一个带有呈现 html 的新选项卡。拖放功能不起作用。javascript 库未正确加载。
此方法出现问题。
function render_html(){
textarea = document.getElementById("generated_html_textarea");
// Set the generate html to the value from the textarea.
generated_html = textarea.value;
console.log(generated_html);
// Create a new tab.
var new_window = window.open('');
maincontentstyle = document.getElementById("maincontentstyle");
rendered_html = document.createElement("div");
rendered_html.setAttribute("id","rendered_html");
rendered_html.setAttribute("style","border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;");
rendered_html.innerHTML += generated_html;
rendered_html.innerHTML +='<span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="show_answer()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button> </span>';
results = document.getElementById("results");
// Append the rendered html to the results tab
results.appendChild(rendered_html);
htmlRendered = true;
header = '<!DOCTYPE HTML>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Word Matching Exercise</title>\n\t\t<style>\n*:focus {outline: 2px solid blue; outline-offset: 2px;}\n\t\tdetails {padding:3px;}\n\t\t</style>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"boxes.css?v=9999\" />\n\t\t<script type=\"text/javascript\" src=\"event1.js?v=9999\">';
header += '</'
header += 'script>\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-89940905-27\">'
header += '</'
header += 'script>\n<script>\n\t window.dataLayer = window.dataLayer || [];\n\t function gtag(){dataLayer.push(arguments)};\tgtag(\"js\", new Date());\tgtag(\"config\", \"UA-89940905-27\");\n'
header += '</'
header += 'script>\n'
header += '<script src="jquery-1.7.2.min.js">'
header += '</'
header += 'script>'
header += '<script src="jquery-ui.min.js">'
header += '</'
header += 'script>'
header += '<script src="jquery.ui.touch-punch.min.js">'
header += '</'
header += 'script>'
header += '<script src="jquery.alerts.js">'
header += '</'
header += 'script>'
header += '<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen">'
header += '<script type=\"text/javascript\" src=\"../logging.js\">'
header += '</'
header += 'script>\n</head>\n\t\t<body>';
new_tab_html = header;
new_tab_html += rendered_html.innerHTML;
footer = '\n\t\t</body>\n</html>\n';
footer += '<script type="text/javascript" src="GetElementPosition.3.js">'
footer += '</'
footer += 'script>'
footer += '<script>audioOn = false; $(function() {$(\'.menulink\').click(function(){if (audioOn) {$("#bg").attr(\'src\',\"../audioOff.png\"); audioOn = false;}else {$(\"#bg\").attr(\'src\',"../audioOn.png");audioOn = true; speak(" ");}return false;});});'
footer += '</'
footer += 'script>'
footer += '<img id="bg" src="../audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;">'
new_tab_html += footer;
console.log(new_tab_html);
new_window.document.write(new_tab_html);
}
javascript 库使用相对路径。
解决方案
推荐阅读
- sql - 如何通过将下一行的值与前一个值进行比较来找到下一行的值?
- javascript - 重新渲染 MathJax 文本?
- docker - 在 Kubernetes 中创建部署时引用 Dockerfile 的正确方法是什么?
- javascript - 创建 IDP SAML 响应
- java - 在java中使用new关键字而不定义变量
- sql - 具有超过 2 个结果列的透视/取消透视 oracle sql 查询
- python - 一个pandas列的累积总和,直到达到最大值,平均相邻行
- bash - shell 脚本中需要一元运算符
- javascript - 等待异步动作创建者更新另一个动作创建者内部的状态
- keras - 我可以为 pytorch/keras 提供显式梯度/粗麻布来加速学习吗?