【问题标题】：Problems accessing a dictionary/json in a javascript function to populate a table在 javascript 函数中访问字典/json 以填充表时出现问题
【发布时间】：2020-08-13 00:27:47
【问题描述】：

概述：我正在使用 Python 创建一个网页，并在我的代码中生成 html 和 javascript。此外，我正在解析 csv 文件并将它们的表格数据转换为 html。我希望能够单击一行文本，然后将该文本的关联表格数据加载到当前活动网页上的 iframe 中。我遇到的问题是我的 javascript 函数无法识别我发送它以检索相应表数据的密钥。如果我手动输入返回表数据的密钥，则会返回正确的数据——尽管表没有加载。但是，如果我以编程方式生成密钥，即使字符串看起来相同，它也会返回为“未定义”。

目标：我需要弄清楚我用来尝试检索表数据的语法或键的格式是否有问题。其次，我需要弄清楚为什么表格数据没有正确加载到我的 iframe 中。

例子：

import pandas

opening_html =  """<!DOCTYPE html><h1> Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe name="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<a href='' onclick="send_table_data(this);"> test-1</a><br>"""
java = """<script type='text/javascript'>
            var table_filename = """ + java_variables + ";"
            
java += """function send_table_data(obj) {
            var t = obj.text + ' 00';
            alert(t)
            //This line below will not work
            var table_data = table_filename[t];
            //But this line will return the correct value
            var table_data = table_filename['test-1 00'];
            alert(table_data);
            //This line should load the data, but does nothing
            document.getElementsByName('table_frame').src = table_data;
        }
        </script>"""

html_text = """<head>
                <link rel="stylesheet" href="style.css">
                </head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'

with open('test_table_load.html', 'w') as w:
    w.write(html_text)

编辑：我刚刚发现由于某种原因在 var t 的开头有一个默认空格 - 所以使用 trim() 似乎可以解决这个问题。现在，剩下的唯一问题是为什么数据没有加载到表中。

【问题讨论】：

要摆脱“默认空间”，只需从 ">test-1" 中删除空间。

标签： javascript python iframe

【解决方案1】：

您似乎发现了与您的密钥混淆的空间的错字，所以这是您的第二个问题。

您的代码

因此，要让您的表格填充到 iframe 中，您需要修复三件事：

要编辑 iframe 的 HTML 内容，您应该设置 .srcdoc 元素，而不是 .src
document.getElementsByName() 函数将返回一个 HTML 元素数组，因此为了获得您想要的元素，您应该执行以下操作之一：
- （推荐）切换到使用 document.getElementById 并在 iframe 代码中使用 id='table_frame'
- 使用document.getElementsByName('table_frame')[0]选择数组的第一个元素
您用作函数触发器的锚标记会将您重定向回原始 HTML 页面，从而阻止您看到 javascript 函数所做的任何更改。一个简单的解决方案是改用<button> 元素代替<a>。

修复后的代码如下所示：

import pandas
import json

opening_html =  """<!DOCTYPE html><h1>Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe id="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<button href='' onclick="send_table_data(this);"> test-1</button><br>"""
java = """<script type='text/javascript'>
            var table_filename = """ + java_variables + ";"
            
#for the button, innerText needs to be used to get the button text
java += """function send_table_data(obj) {
            var t = obj.innerText + ' 00';
            alert(t)
            //This line below will not work
            var table_data = table_filename[t];
            //But this line will return the correct value
            var table_data = table_filename['test-1 00'];
            alert(table_data);
            //This line should load the data, but does nothing
            document.getElementById('table_frame').srcdoc = table_data;
        }
        </script>"""

html_text = """<head>
                <link rel="stylesheet" href="style.css">
                </head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'

with open('test_table_load.html', 'w') as w:
    w.write(html_text)

其他建议

我强烈建议研究一些可以帮助您生成网站的 python 框架，或者使用像 Flask 这样的 HTML 模板，或者可以帮助使用 Python 生成 HTML 的库。（我会为您当前的用例推荐Dash）

【讨论】：

感谢您的意见和建议。我感觉在更改表数据后查看“更新”页面时出现问题，我只是不知道如何解决它。我认为您的答案最终会对我有用，但现在我无法再从字典中获取数据。 obj.text 行现在返回一个未定义的错误。如果我能解决这个问题，我认为这会奏效。
搞定了。我只是将 obj.text 更改为 obj.innerText 并返回了所需的结果。