How to append the HTML code snippet to HTML iframe using jquery?

Question

How to append the HTML code snippet to HTML iframe using jquery? Actually, I have added an HTML code snippet in MySQL Database using PHP. Now I have fetched that HTML Code snippet and trying to append that HTML code snippet in iframe using jquery.

$( document ).ready(function() {
    var snippets='<?php echo $snippets_preview; ?>';
    $(function() {  
        var $iframe = $('#iframehtml');
        $iframe.ready(function() {
            $iframe.contents().find("body").append(snippets);
        });
    });
});

But I am getting the following error

Uncaught SyntaxError: Invalid or unexpected token

snippets_preview has the following value in it. when I change the value of snippet_preview. it works fine.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
        <style>'.$postdata['snippets_css'].'</style>
        <script>'.$postdata['snippets_javascript'].'</script>
    </head>
    <body>

        '.$ContentDecodedHTML.'

    </body>
</html>

Can you check and tell us on which line you are getting this error? — M.Hemant, Apr 06 '19 at 11:23
when I change the value of snippet_preview. it works fine... — Upasana Chauhan, Apr 06 '19 at 11:24
You can't echo strings containing PHP tags like that. They will be read literally and not parsed, which means that any `'` (which you use to wrap the string `snippet` in) will cause the string to break. If you want your PHP tags to get executed, you need to have that page as a separate PHP-file which you call using Ajax. PHP and JS can't be mixed like that (since PHP is server side and JS is client side). — M. Eriksson, Apr 06 '19 at 11:25
Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — M. Eriksson, Apr 06 '19 at 11:26
@MagnusEriksson i Don't think its duplicate of the question you shared — Upasana Chauhan, Apr 06 '19 at 11:29
Looking at your code, it's clear that you're not 100% understanding the difference between client and server side (which _is_ confusing in the beginning), so I would argue that the duplicate is the first thing you need to read up on before continuing. — M. Eriksson, Apr 06 '19 at 11:30
but when i am changing the value of $snippet_preview to a simple string like "Hello". I am not getting any error and code working fine... — Upasana Chauhan, Apr 06 '19 at 11:32
@magnuserickson this is not a server vs client misunderstanding, you can have php echo out to a script tag, ie during the php execution phase. OP never said they were trying to execute some php at document ready event — Patrick Evans, Apr 06 '19 at 11:37
That is easily fixed by passing it through addslashes call or similar function. it still is not a server vs client misunderstanding — Patrick Evans, Apr 06 '19 at 11:40
@PatrickEvans can you please share some reference as i did it but still getting an error! — Upasana Chauhan, Apr 06 '19 at 11:46

score 0 · Answer 1 · answered Apr 06 '19 at 12:32

If you want to embed html code in an iframe you have to do for example:

JAVASCRIPT (class)

<script>
    // -------------------------------------------------------- CLASS
        var class_iframe = {
            // ------------------------------------- STEP 1 (Create an new Iframe)
                generateIframe: function(src, targetDOM){
                    // ---------------- Create iframe
                        var newIframe = document.createElement('iframe');

                        newIframe.onload = function(){
                            class_iframe.getIframe($('.iframehtml').contents());
                        };

                        newIframe.src = src;
                        newIframe.className = "iframehtml";
                        newIframe.frameBorder = "0";

                    // ---------------- Insert iframe in DOM
                        $(targetDOM).replaceWith(newIframe);
                },

            // ------------------------------------- STEP 2 (Get iframe in this class)
                getIframe: function(iframe){
                    class_iframe.frame = iframe; console.log(class_iframe.frame);
                },

            // ------------------------------------- STEP 3 (Append in this iframe)
                appendIframe: function(targetInIframe, content){
                    console.log(class_iframe.frame);
                    $target = class_iframe.frame.find(targetInIframe); console.log($target);
                    $target.prepend(content);
                },

        }

    // -------------------------------------------------------- ACTION (loadPage)
        $(document).ready(function(){
            //$("body").prepend(`<div id="insertIframe"></div>`); //Just for the test
            class_iframe.generateIframe("your_url_iframe.html", "#insertIframe");

        });

</script>

In your html page

<div id="insertIframe"></div>

JAVASCRIPT (for append in your new iframe)

<script>
    // -------------------------------------------------------- ACTION (after loadPage)
        class_iframe.appendIframe("html", `<div class="insert">Hello world !</div>`);
</script>

How to append the HTML code snippet to HTML iframe using jquery?

1 Answers1