javascript - Node-Red global.get ("camera_url") 引用错误 : global is not defined

标签 javascript iframe node-red

在 Node-red 仪表板上,我想以不同的流量显示相机流。背后的想法是在每个流上显示相机。

为了显示相机流,我使用了 iFrame。一切正常,但我必须为每个单独的 iFrame 提供流的 URL。

所以我在考虑一种解决方案,将 URL 设置在一个地方并将值共享给所有流。据我所知,我必须使用 node-red 的全局上下文。

因此,我安装了 node-red-contrib-config 包并放置了一个这样的配置节点

[
    {
        "id": "3d181192.cf3c5e",
        "type": "tab",
        "label": "Global data",
        "disabled": false,
        "info": ""
    },
    {
        "id": "5851290f.6758b8",
        "type": "config",
        "z": "3d181192.cf3c5e",
        "name": "global_camera",
        "properties": [
            {
                "p": "camera_url",
                "pt": "global",
                "to": "http://192.168.178.33:8081",
                "tot": "str"
            }
        ],
        "active": true,
        "x": 157,
        "y": 78,
        "wires": []
    }
]

为了创建 iframe,我尝试了不同的方法。如果我使用静态 URL,它会与模板节点和 UI 模板节点一起使用。如果我尝试获取全局值,它永远不会起作用。我总是得到

"Uncaught ReferenceError: global is not defined"

我尝试将 URL 设置为 ...src={{global.get("camera_url")}} 并使用如下不同的代码:

[
{
    "id": "739e53d5.fbf2bc",
    "type": "template",
    "z": "3845329d.55847e",
    "name": "",
    "field": "template",
    "fieldType": "msg",
    "format": "handlebars",
    "syntax": "mustache",
    "template": "<iframe id=\"camera\" seamless width=\"100%\" height=\"100%\"></iframe>\n<script>\n/*(function(scope) {\n    // debugger;\n    var camera_url = global.get('camera_url');\n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=camera_url;\n})(scope);\n*/\n  var camera_url = global.get(\"camera_url\");\n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=camera_url;\n</script>",
    "output": "str",
    "x": 86,
    "y": 810,
    "wires": [
        [
            "f8f0597d.727d28"
        ]
    ]
},
{
    "id": "f8f0597d.727d28",
    "type": "ui_template",
    "z": "3845329d.55847e",
    "group": "ad85611c.fa213",
    "name": "camera",
    "order": 1,
    "width": "6",
    "height": "6",
    "format": "",
    "storeOutMessages": false,
    "fwdInMessages": false,
    "templateScope": "local",
    "x": 90,
    "y": 865,
    "wires": [
        []
    ]
},
{
    "id": "77018043.39f11",
    "type": "inject",
    "z": "3845329d.55847e",
    "name": "",
    "topic": "",
    "payload": "",
    "payloadType": "date",
    "repeat": "",
    "crontab": "",
    "once": true,
    "onceDelay": "0.3",
    "x": 51,
    "y": 772,
    "wires": [
        [
            "739e53d5.fbf2bc"
        ]
    ]
},
{
    "id": "ad85611c.fa213",
    "type": "ui_group",
    "z": "",
    "name": "Serial",
    "tab": "ab06111f.f336",
    "order": 1,
    "disp": true,
    "width": "15"
},
{
    "id": "ab06111f.f336",
    "type": "ui_tab",
    "z": "",
    "name": "Serial Monitor",
    "icon": "dashboard"
}

]

谁能解释一下我做错了什么?

谢谢,帕特里克

最佳答案

感谢 Adelin 的提示。

这是我的解决方案。正如 Adelin 解释的那样,我试图从浏览器访问全局上下文。这是不可能的,只能在服务器端代码上达到。为了克服这个限制,我使用了一个函数节点,它读取全局上下文并将 URL 放入 msg.payload。此消息被转发到创建 iFrame 的模板节点。

模板节点观察传入的msg,设置iframe的src属性。 为了触发一切,我添加了一个注入(inject)节点

[
{
    "id": "f8f0597d.727d28",
    "type": "ui_template",
    "z": "3845329d.55847e",
    "group": "ad85611c.fa213",
    "name": "camera",
    "order": 1,
    "width": "6",
    "height": "6",
    "format": "\n<script language=\"javascript\" type=\"text/javascript\">\n           (function(scope){ \n                scope.$watch('msg', function(msg) {\n    \n    window.ifr = document.getElementById(\"camera\");\n    window.ifr.src=msg.payload;\n                });\n            })(scope);\n\n</script>\n<iframe id=\"camera\" seamless width=\"100%\" height=\"100%\"></iframe>",
    "storeOutMessages": false,
    "fwdInMessages": false,
    "templateScope": "local",
    "x": 95,
    "y": 973,
    "wires": [
        []
    ]
},
{
    "id": "70c649d2.ea3648",
    "type": "function",
    "z": "3845329d.55847e",
    "name": "get_camera_url",
    "func": "msg.payload = global.get(\"camera_url\");\nreturn msg;",
    "outputs": 1,
    "noerr": 0,
    "x": 108,
    "y": 926,
    "wires": [
        [
            "f8f0597d.727d28"
        ]
    ]
},
{
    "id": "d0e3c1a7.33c8f",
    "type": "inject",
    "z": "3845329d.55847e",
    "name": "trigger camera",
    "topic": "",
    "payload": "",
    "payloadType": "date",
    "repeat": "",
    "crontab": "",
    "once": true,
    "onceDelay": 0.1,
    "x": 89,
    "y": 873,
    "wires": [
        [
            "70c649d2.ea3648"
        ]
    ]
},
{
    "id": "ad85611c.fa213",
    "type": "ui_group",
    "z": "",
    "name": "Serial",
    "tab": "ab06111f.f336",
    "order": 1,
    "disp": true,
    "width": "15"
},
{
    "id": "ab06111f.f336",
    "type": "ui_tab",
    "z": "",
    "name": "Serial Monitor",
    "icon": "dashboard"
}

]

关于javascript - Node-Red global.get ("camera_url") 引用错误 : global is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50947596/

相关文章:

javascript - 如何使用不同高度的页面动态调整 iFrame 的大小?

node-red 返回所有流变量

Docker/Node-red - 如果卷在 USB 闪存驱动器上,npm 无法安装调色板

node.js - 在 root 模式下设置 Node-red 密码

javascript - Webelement.Object.<method> 提供原始结果还是克隆?

javascript - 如何将数组值传递给javascript函数? PHP Laravel

javascript - Rails 2.3.11 中未出现 CSV 下载框

jquery - 在动态加载的 iframe 中捕获 keyup 事件

html - 对 YouTube iframe 使用无缝和/或沙盒属性有什么意义吗?

javascript - 谷歌浏览器扩展程序 : How to find out if a user has signed in to the Chrome browser?