Echo PHP code inside Javascript

Question

I am having problem getting this to work. I am trying to echo some php code to html if the page is in an iframe. Below is a short example of the php code i try to echo (the real code i try to echo is much longer)...

<?php $pic='https://cdn.pixabay.com/photo/2015/06/19/17/58/sample-815141_960_720.jpg'; ?>

<div id="frameid"></div>
<script type="text/javascript">     
    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    if (inIframe()) {
        var node = document.getElementById('frameid');
        node.innerHTML('<?php echo '<img width="100%" src="'.$pic.'"></img>'; ?>');
    }
</script>

Answer 1

Seems there was some quotes issue. You can try the below code:

<div id="frameid"></div>
<script type="text/javascript">     
    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    if (inIframe()) {
        var node = document.getElementById('frameid');
        node.innerHTML(<?php echo "...something involving html and php variables...."; ?>);
    }
</script>

Answer 2

Can you try this? var pic = ; innerHTML(""); I think is more clear to separate js from php, and recomanded

Answer 3

You are having troubles with single quote, you may consider this function (taken from WP https://developer.wordpress.org/reference/functions/_wp_specialchars/ ) to escape quote (single and double)

node.innerHTML('<?php echo esc_attr('<img width="100%" src="'.$pic.'"></img>'); ?>');

where you can define

function esc_attr( $text ) {
    return _wp_specialchars( $safe_text, ENT_QUOTES );
}