Search code examples
javascriptwordpressiframedynamicmetadata

Dynamic iframe src based on custom WordPress metadata


I've been trying to show a graph inside a WordPress Template. It works fine with this format:

<iframe height="500" src="https://datasource.com/fantom/0xf704f5ac5edf152168e07e6f5f108366911250ac?embed=1&theme=dark&trades=0&info=0">
</iframe>

But I can't seem to make it work in a template using dynamic metadata.

<script>
function ShowGraph() {
    var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
    var Network = RawNetwork.replace(/<[^>]*>/g, '');
    
    var RawAddress=document.getElementById("TokenAddress").innerHTML;
    var Address = RawAddress.replace(/<[^>]*>/g, '');
    
    const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
    document.getElementById('TokenGraph').src = Graph;
}
</script>

<iframe  height="500" id="TokenGraph" src="" onLoad="ShowGraph();"></iframe>

I hope somebody can help me figure out what I'm missing here.

Cheers mates!


Solution

  • There is a loop. Onload you are changing the src and then onload fires again.

    try

    <script>
    window.onload = function () {
        var RawNetwork=document.getElementById("TokenNetwork").innerHTML;
        var Network = RawNetwork.replace(/<[^>]*>/g, '');
    
        var RawAddress=document.getElementById("TokenAddress").innerHTML;
        var Address = RawAddress.replace(/<[^>]*>/g, '');
    
        const Graph = 'https://datasource.com/' + Network + '/' + Address + '?embed=1&theme=dark&trades=0&info=0';
        document.getElementById('TokenGraph').src = Graph;
    }
    </script>
    <iframe  height="500" id="TokenGraph" src=""></iframe>