如何将 ajax 响应的输出放在 codeigniter 的模态 iframe 中

Question

我有一个 codeigniter 项目。在我看来，我有一个模态。单击按钮时，模态启动并调用上面的函数。它执行 ajax 调用以创建 html 页面并将其输出为调用的响应。这样可行。现在我需要获取此响应并将其显示到 iframe 中。我的尝试失败了。我做错了什么或我必须以哪种方式做错？

背景：我想使用 html 代码进行预览，该代码将视图文件中的静态代码与 ajax 调用的两个给定字段相结合。这些页面有自己的 CSS 样式。所以我需要使用 iframe 来准备没有其他 css 样式发生冲突。也许有更简单的方法吗？

模态：撰写 ×

                <div class="row" id="preview_area">

                    <iframe id="preview_frame" class="col-lg-12 col-md-12 col-sm-12" src=""></iframe>

                </div>

              </div>

              <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save changes</button>

            </div>

          </div><!-- /.modal-content -->

      </div><!-- /.modal-dialog -->

  </div><!-- /.modal -->

功能：

$('#launchbutton_modal_preview').on('click',function(e){

      

       event.preventDefault();

        $.ajax({

            type: "POST",

            url: "<?= site_url(); ?>myurl/my_view/",

            data: {

                <?php echo $this->security->get_csrf_token_name(); ?> : '<?php echo $this->security->get_csrf_hash(); ?>',

                head : $('input[name=subject]').val(),

                content : $('.textarea').val(),

            },          

            success: function(response) {

                console.log(response);

                    if(response != ''){

                        alert("response",response);

                        getIframeDocument($('#preview_frame')).body.update(response);

                        var iFrame = $('<iframe id="thepage"></iframe>');                            

                        var iFrameDoc = iFrame[0].response || iFrame[0].contentWindow.document;

                        iFrameDoc.write('<p>Some useful html</p>');

                        iFrameDoc.close();

                        $('#preview_area').html(iFrame);

                        

                    }

                }

        }); 

        

    });

Answer 1

经过几个小时的测试后，我找到了一种安静简单的方法来做我想做的事情。&nbsp; //Add iframe with the responsepage to modal$('<iframe id="preview_frame" class="col-lg-12 col-md-12 col-sm-12 p-0" style="position:relative;top:0px;width:100%;height:75vh;border: 1px solid #e9ecef;" src=""></iframe>')&nbsp; &nbsp;.appendTo('#preview_area')&nbsp; &nbsp;.on('load', function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).contents().find('body').append(response);&nbsp; &nbsp;});