如何使用jquery将HTML代码段附加到HTML iframe?

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>
doutang0335
doutang0335 可以请你分享一些参考,因为我做了但仍然收到错误!
一年多之前 回复
dongmen1860
dongmen1860 通过传递addslashes调用或类似函数可以很容易地修复它。它仍然不是服务器与客户的误解
一年多之前 回复
dongwuli5105
dongwuli5105 好,谢谢!!让我检查一次!
一年多之前 回复
drmlxgmqn18198265
drmlxgmqn18198265 我在第一次评论中解释了原因。
一年多之前 回复
dongzhisang5342
dongzhisang5342 这不是服务器与客户端的误解,你可以将php回显到脚本标签,即在php执行阶段。OP从未说过他们试图在文档就绪事件中执行一些php
一年多之前 回复
doulang5323
doulang5323 但是当我将$snippet_preview的值更改为像“Hello”这样的简单字符串时。我没有得到任何错误和代码工作正常...
一年多之前 回复
doujuegai8830
doujuegai8830 看看你的代码,很明显你并不是100%理解客户端和服务器端之间的区别(这在开头就很混乱),所以我认为重复是你需要在继续之前阅读的第一件事。。
一年多之前 回复
douyou7878
douyou7878 我不认为它与您分享的问题重复
一年多之前 回复
duan0708676887
duan0708676887 可能重复的客户端和服务器端编程有什么区别?
一年多之前 回复
dpqjvoq9033
dpqjvoq9033 我该怎么办?
一年多之前 回复
dongnianchou7047
dongnianchou7047 您不能回显包含这样的PHP标记的字符串。它们将按字面读取而不进行解析,这意味着任何'(用于包装字符串片段)将导致字符串中断。如果您希望执行PHP标记,则需要将该页面作为使用Ajax调用的单独PHP文件。PHP和JS不能像那样混合(因为PHP是服务器端而JS是客户端)。
一年多之前 回复
dongpin4611
dongpin4611 当我更改snippet_preview的值时。它工作得很好......
一年多之前 回复
duannan4486
duannan4486 您能否查看并告诉我们您收到此错误的是哪一行?
一年多之前 回复

1个回答

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>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问