HABPanel - custom widget - iframes with parameters

Setup, Configuration and Use Beginners
, ,
1

Hi,
I am trying to create a widget that has iframe inside. Now, when I paste a static src to the iframe, my widget works. But I want to be able to pass the link as a parameter:

<iframe ng-src="{{config.chart_link}}"></iframe>

This does not work, and nothing is being displayed - what am I doing wrong here?

2

I’m having a similar issue, trying to “build” the url

<iframe src="https://www.google.com/maps/embed/v1/place?key=myapikeyhere&q={{itemValue(config.device_geo_location)}}&zoom=15" width="100%" height="100%">

did you find a solution for your issue ?

3

Hey, actually I did. Not sure whether you gonna like it though, but it works for me and I’m pretty happy with it. The idea is to load javascript file, and then replace hidden div that contains item value with iframe using that javascript:

<div class="content iframe">
    <div class="hidden src">#loading_{{config.chartlink}}</div>
    <div class="dst"></div>
</div>
<div class="hidden" oc-lazy-load="['/static/custom/scripts/custom.js']"></div>

And then in custom.js (codes are a bit weird as they load jquery asynchronously, so there has to be few if’s and intervals. Also repeatTime is used to reload the content each 5 minutes (I reload grafana graphs each 5m)):

if (interval == undefined){
    var interval = null;
}
if (repeatTime == undefined){
    var repeatTime = 300000; //5m
}
if (repeatInterval == undefined){
    var repeatInterval = null;
}

if (typeof loadJQuery != "function") { 
    function loadJQuery(){
        var newscript = document.createElement('script');
        newscript.type = 'text/javascript';
        newscript.async = true;
        newscript.src = '/static/custom/scripts/jQuery/jquery-3.2.1.min.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
    };
    loadJQuery();
}

if (typeof loadContent != "function" && window.interval === null) {   
    window.interval = window.setInterval(function(){
        if (typeof loadContent != "function") {
            if (typeof jQuery === undefined || typeof($) === "undefined") return;
            function loadContent(source, element){
                var srcElems = $(source);
                for(var i = 0; i < srcElems.length; i++){
                    var text = $(srcElems[i]).text();
                    if (text.indexOf('#loading_') === -1) continue;
                    text = text.replace('#loading_', '');
                    var adjacentElem = $(srcElems[i]).next();
                    $(adjacentElem).text('');
                    $(adjacentElem).append(element.replace('@replace@', text));
                }
            };
            clearInterval(window.interval);
            loadContent('div.iframe .src', '<iframe src="@replace@"></iframe>');

            if (window.repeatInterval === null) {
                window.repeatInterval = window.setInterval(function(){loadContent('div.iframe .src', '<iframe src="@replace@"></iframe>')},repeatTime);                
            }
        } 
        else {
            clearInterval(window.interval);
        }
    }, 1000);
}
4

thanks - tbh i was hoping for a much easier way to accomplish what i want :slight_smile:

I’m not sure i will use this, perhaps i just leave my widget for now…

5

Does anybody have a solution to the problem described by Max1968 … other then the one from ojek?