如何将 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

经过几个小时的测试后，我找到了一种安静简单的方法来做我想做的事情。

  //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>')

   .appendTo('#preview_area')

   .on('load', function(){

        $(this).contents().find('body').append(response);   

});