jQuery append() 到新窗口中不适用于 Microsoft Edge [英] jQuery append() into new window not working with Microsoft Edge

查看：26
本文介绍了jQuery append() 到新窗口中不适用于 Microsoft Edge的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Microsoft Edge 在尝试将克隆的内容附加到新窗口时抛出不支持此类接口"错误.下面是一个例子:

jQuery(document).ready(function() {jQuery('.trigger').click(function() {var target = jQuery(this).data('print_target');var w = window.open('', '', 'status=no, toolbar=no, menubar=no, location=no');var print_html = ''+ document.getElementsByTagName('title')[0].innerHTML + '</title></head><body></body></html>';w.document.write(print_html);var ua = window.navigator.userAgent;var ie = true;//.html() 需要 IE 浏览器如果(ua.indexOf(MSIE")！= -1){//console.log('MSIE - Craptastic');jQuery(w.document.body).append(jQuery(target).clone(true).html());}否则如果(ua.indexOf(三叉戟/")！= -1){//console.log('IE 11 - 三叉戟');jQuery(w.document.body).append(jQuery(target).clone(true).html());}否则如果(ua.indexOf(边缘/")！= -1){console.log('IE 12 - Edge');//错误:不支持这样的接口jQuery(w.document.body).append(jQuery(target).clone(true).html());//作品//jQuery(w.document.body).append('嘿伙计，这是一些文本');//作品//jQuery(w.document.body).html( jQuery( target ).clone( true ).html() );}别的{//console.log('正确的浏览器');jQuery(w.document.body).append(jQuery(target).clone(true));即=假；}});});</code></pre><p>这只是 Microsoft Edge 的一个问题，它适用于所有基于标准的浏览器和 IE 浏览器 7、8、9、10 和 11.一个类似的问题是 <a href="https://social.technet.microsoft.com/Forums/en-US/7629c569-1e7f-4128-a73d-bf0b579c7203/website-error-script16386-no-such-interface-supported?forum=ieitprocurrentver" rel="nofollow">在此线程中提出</a> 但没有解决.</p><p>这里是一个 jsfiddle，显示了什么:<a href="https://jsfiddle.net/switzerbaden/nhtywLsp/" rel="nofollow">https://jsfiddle.net/switzerbaden/nhtywLsp/</a></p><div class="h2_lin"> 解决方案 </div><p>先克隆 HTML，然后在之前添加 div 并在之后关闭它:</p><pre><code>var new_target = jQuery.trim( jQuery( target ).clone( true ).html() );jQuery( w.document.body ).append( "</p><div>" + new_target + "</div><p>" );</code></pre><p><p>Microsoft Edge is throwing 'No such interface supported' error when trying to append cloned content into new window.  Here is an example:</p><pre><code>jQuery(document).ready(function() {
    jQuery('.trigger').click(function() {
        var target = jQuery(this).data('print_target');

        var w = window.open('', '', 'status=no, toolbar=no, menubar=no, location=no');
        var print_html = '<!DOCTYPE html><head><title>' + document.getElementsByTagName('title')[0].innerHTML + '</title></head><body></body></html>';
        w.document.write( print_html );

        var ua = window.navigator.userAgent;
        var ie = true;

        //.html() required for IE browsers
        if ( ua.indexOf("MSIE ") != -1) {
            //console.log('MSIE - Craptastic');
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );
        }
        else if ( ua.indexOf("Trident/") != -1) {
            //console.log('IE 11 - Trident');
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );
        }
        else if ( ua.indexOf("Edge/") != -1 ){
            console.log('IE 12 - Edge');
            //error: No such interface supported
            jQuery(w.document.body).append( jQuery( target ).clone( true ).html() );

            //works
            //jQuery(w.document.body).append( 'hey dude, this is some text' );

            //works
            //jQuery(w.document.body).html( jQuery( target ).clone( true ).html() );

        }
        else{
            //console.log('proper browser');
            jQuery(w.document.body).append( jQuery( target ).clone( true ) );
            ie = false;
        }
    });
});
</code></pre><p>This is only an issue with Microsoft Edge, it works in all standards based browsers and IE browsers 7,8,9,10 and 11. A similar issue has been <a href="https://social.technet.microsoft.com/Forums/en-US/7629c569-1e7f-4128-a73d-bf0b579c7203/website-error-script16386-no-such-interface-supported?forum=ieitprocurrentver" rel="nofollow">raised in this thread</a> but not resolved.</p>

<p>here is a jsfiddle showing what's what: <a href="https://jsfiddle.net/switzerbaden/nhtywLsp/" rel="nofollow">https://jsfiddle.net/switzerbaden/nhtywLsp/</a></p><div class="h2_lin"> 解决方案 </div><p>First clone the HTML, then add div before and close it after:</p><pre><code>var new_target = jQuery.trim( jQuery( target ).clone( true ).html() );
jQuery( w.document.body ).append( "<div>" + new_target + "</div>" );
</code></pre><p>

                        <p>这篇关于jQuery append() 到新窗口中不适用于 Microsoft Edge的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2565064');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="jQuery append() 进入新窗口不适用于 Microsoft Edge" href="/2853990.html">
                            jQuery append() 进入新窗口不适用于 Microsoft Edge;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery append()到新窗口中无法与Microsoft Edge一起使用" href="/1484476.html">
                            jQuery append()到新窗口中无法与Microsoft Edge一起使用;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jquery append()不适用于动态添加的元素" href="/2565201.html">
                            jquery append()不适用于动态添加的元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jquery append() 不适用于动态添加的元素" href="/2854042.html">
                            jquery append() 不适用于动态添加的元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="FormData.append()不适用于文件" href="/2166136.html">
                            FormData.append()不适用于文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="快速零件-表单模板不适用于Microsoft Edge" href="/1347191.html">
                            快速零件-表单模板不适用于Microsoft Edge;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery适用于jsFiddle不适用于wesite" href="/1811460.html">
                            jQuery适用于jsFiddle不适用于wesite;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="append不适用于动态添加的元素" href="/1238887.html">
                            append不适用于动态添加的元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Flex 对齐器适用于 Firefox/Edge，而不适用于 Chrome" href="/2747718.html">
                            Flex 对齐器适用于 Firefox/Edge，而不适用于 Chrome;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery 卸载事件仅适用于关闭窗口，不适用于链接导航" href="/2820994.html">
                            jQuery 卸载事件仅适用于关闭窗口，不适用于链接导航;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Microsoft Graph不适用于ADFS？" href="/834135.html">
                            Microsoft Graph不适用于ADFS？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="setTimeout不适用于jQuery" href="/1488900.html">
                            setTimeout不适用于jQuery;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery不适用于fadeOut" href="/1494092.html">
                            jQuery不适用于fadeOut;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Jquery不适用于IE" href="/1284865.html">
                            Jquery不适用于IE;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery不适用于Firefox" href="/761387.html">
                            jQuery不适用于Firefox;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="砌体不适用于jQuery" href="/1493969.html">
                            砌体不适用于jQuery;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery SlideToggle（）不适用于FireFox，适用于Chrome" href="/762231.html">
                            jQuery SlideToggle（）不适用于FireFox，适用于Chrome;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="POST 适用于 JQuery，但不适用于 XMLHttpRequest" href="/2824123.html">
                            POST 适用于 JQuery，但不适用于 XMLHttpRequest;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="POST 适用于 JQuery 但不适用于 XMLHttpRequest" href="/2503313.html">
                            POST 适用于 JQuery 但不适用于 XMLHttpRequest;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Ajax脚本仅适用于Firefox(不适用于Chrome，Safari，Edge等)" href="/1494686.html">
                            Ajax脚本仅适用于Firefox(不适用于Chrome，Safari，Edge等);
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="为什么JQuery keydown适用于窗口而不适用于文本框?" href="/1488078.html">
                            为什么JQuery keydown适用于窗口而不适用于文本框?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="SaveAs功能适用于Microsoft PC，但不适用于MAC" href="/737232.html">
                            SaveAs功能适用于Microsoft PC，但不适用于MAC;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery函数.on适用于1.8.3但不适用于1.9.1" href="/1012935.html">
                            jQuery函数.on适用于1.8.3但不适用于1.9.1;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="JQuery适用于Chrome，Firefox，但不适用于IE" href="/1327941.html">
                            JQuery适用于Chrome，Firefox，但不适用于IE;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery slideToggle不适用于joomla，但适用于jsbin" href="/1476700.html">
                            jQuery slideToggle不适用于joomla，但适用于jsbin;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin'" href="/893060.html">
                            拒绝显示一个框架，因为它将'X-Frame-Options'设置为'sameorigin';
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取'npm WARN弃用'警告" href="/840917.html">
                            在运行npm install命令时获取'npm WARN弃用'警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self'”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'jquery,append,到,新窗口,中,不适,用于,microsoft,edge'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>