ueditor简单图片上传，iframe跨域问题的完美解决

最新推荐文章于 2022-11-11 15:11:04 发布

peng646138471

最新推荐文章于 2022-11-11 15:11:04 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/peng646138471/article/details/82052780

版权

ueditor.all.js有一块关于简单文件上传的代码，如下：

 var w = containerBtn.offsetWidth || 20,
            h = containerBtn.offsetHeight || 20,
            btnIframe = document.createElement('iframe'),
            btnStyle = 'display:block;width:' + w + 'px;height:' + h + 'px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;';

        domUtils.on(btnIframe, 'load', function(){

            var timestrap = (+new Date()).toString(36),
                wrapper,
                btnIframeDoc,
                btnIframeBody;

            btnIframeDoc = (btnIframe.contentDocument || btnIframe.contentWindow.document);
            btnIframeBody = btnIframeDoc.body;
            wrapper = btnIframeDoc.createElement('div');

            wrapper.innerHTML = '<form id="edui_form_' + timestrap + '" target="edui_iframe_' + timestrap + '" method="POST" enctype="multipart/form-data" action="' + me.getOpt('serverUrl') + '" ' +
            'style="' + btnStyle + '">' +
            '<input id="edui_input_' + timestrap + '" type="file" accept="image/*" name="' + me.options.imageFieldName + '" ' +
            'style="' + btnStyle + '">' +
            '</form>' +
            '<iframe id="edui_iframe_' + timestrap + '" name="edui_iframe_' + timestrap + '" style="display:none;width:0;height:0;border:0;margin:0;padding:0;position:absolute;"></iframe>';

            wrapper.className = 'edui-' + me.options.theme;
            wrapper.id = me.ui.id + '_iframeupload';
            btnIframeBody.style.cssText = btnStyle;
            btnIframeBody.style.width = w + 'px';
            btnIframeBody.style.height = h + 'px';
            btnIframeBody.appendChild(wrapper);

            if (btnIframeBody.parentNode) {
                btnIframeBody.parentNode.style.width = w + 'px';
                btnIframeBody.parentNode.style.height = w + 'px';
            }

            var form = btnIframeDoc.getElementById('edui_form_' + timestrap);
            var input = btnIframeDoc.getElementById('edui_input_' + timestrap);
            var iframe = btnIframeDoc.getElementById('edui_iframe_' + timestrap);

其中form的target=”edui_iframe_’ + timestrap + ‘”，意思就是form提交的后返回的页面会响应到name=“”edui_iframe_’ + timestrap ”的这个iframe里，然后再用js读取iframe里的json数据，问题就出现在这里，这里就跨域，无法读取到这个iframe的document对象。
有尝试过直接在创建iframe的时候，加入<\script>document.domain = “主域名”;

<?php
//$return_json就是后端处理图片后的json数据
if($_FILES)  echo '<html><head><script>document.domain = "主域名";</script></head><body>'.$return_json.'</body></html>';
else echo $return_json;

peng646138471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
ueditor简单图片上传，iframe跨域问题的完美解决

var w = containerBtn.offsetWidth || 20, h = containerBtn.offsetHeight || 20, btnIframe = document.createElement(‘iframe’), btnStyle = ‘display:block;width:’ + w + ‘px;heigh...
复制链接

扫一扫