在javascript函数中访问字典/json以填充表时出现问题_Javascript_Python_Iframe

在javascript函数中访问字典/json以填充表时出现问题

javascript python iframe

在javascript函数中访问字典/json以填充表时出现问题,javascript,python,iframe,Javascript,Python,Iframe,概述：我正在使用Python创建一个网页，并在代码中生成html和javascript。此外，我正在解析csv文件，并将其表数据转换为html。我希望能够单击一行文本，然后将该文本的关联表数据加载到当前活动网页上的iframe中。我遇到的问题是，我的javascript函数无法识别我发送给它以检索相应表数据的键。如果我手动输入返回表数据的键，则返回正确的数据-尽管表没有加载。但是，如果我以编程方式生成键，它将返回为“未定义”，即使字符串看起来是相同的目标：我需要弄清楚用于尝试检索表数据的键

概述：我正在使用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)

导入熊猫
正在打开_html=“”测试“”
table_html=pandas.DataFrame（{'Col_1'：['this'，'is'，'a'，'test']}）
tables_dict={'test-100'：table_html}
java_variables=“%s”%json.dumps（表目录）
表\u帧=“”
测试链接文本=“”
“”“
java=”“”
var table_filename=“”+java_变量+”；“
java+=“函数发送表数据（obj）{
var t=obj.text+'00'；
警报（t）
//下面这行行不通
var table_data=table_文件名[t]；
//但此行将返回正确的值
var table_data=table_文件名['test-100']；
警报（表_数据）；
//此行应加载数据，但不执行任何操作
document.getElementsByName（'table_frame'）。src=table_数据；
}
"""
html_text=“”
“+test\u link\u text+table\u frame+”+“+java+”
将open（'test_table_load.html'，'w'）作为w：
w、 写入（html_文本）

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

看起来你已经用空格解决了你的打字错误，这是你的第二个问题

你的代码因此，要在iframe中填充表，需要解决三个问题：

要编辑iframe的HTML内容，您应该设置

.srcdoc

元素，而不是

.src

document.getElementsByName（）

函数将返回一个HTML元素数组，因此为了获得所需元素，您应该执行以下操作之一：

（推荐）切换到使用
```
document.getElementById
```
并在iframe标记中使用
```
id='table\u frame'
```

使用

document.getElementsByName（'table_frame'）[0]选择数组的第一个元素。

您用作函数触发器的锚标记将您重定向回原始HTML页面，阻止您看到javascript函数正在进行的任何更改。一个简单的解决方案是切换到使用

元素代替

，或者使用一个库来帮助使用Python生成HTML。（我建议您使用当前的用例）
要去掉“默认空间”，只需从“>test-1”中删除空间即可。感谢您的输入和建议。我感觉在更改表数据后查看“更新”页面有问题，我只是不知道如何解决。我想你的答案最终会对我有用，但现在我再也不能从字典里得到数据了。现在，obj.text行返回一个未定义的错误。如果我能把它修好，我想这会管用的，我知道了。我刚刚将obj.text更改为obj.innerText，它返回了所需的结果。