Axure9后生成的Html自动跳转Chrome问题解决方案

各位用过Axure7.0和8.0的产品经理或原型相关的同行肯定知道，以前打开index.html时一般都会跳转到Chrome.html页面或者引导你 安装Axure For Chrome的扩展插件。

但是 Axure官方的扩展程序在推出Axure9.0后就已经失效了，Chrome插件不再支持

目前最新版本是Axure RP Extension for Chrome 0.6.2，虽然能够安装成功，但是无济于事。

综上所述，我们可以采用当年Axure8.0注释或删除index.html和Start.html代码内的Chrome.html字样的代码来避免绘画出的原型首页跳转至上述截图的Chrome插件引导页。

    $(window).bind('load', function () {
        if ((CHROME && BROWSER_VERSION < 64) || // First 2018 release
            (SAFARI && BROWSER_VERSION < 602) || // Minor version 10
            (FIREFOX && BROWSER_VERSION < 57) || // Support Quantum 
            ($axure.browser.isEdge && BROWSER_VERSION < 15) || // 15 for mobile devices (else could go 16, possibly 17)
            (!$axure.browser.isEdge && IE)) {
            if (!QQ && !UC) appendOutOfDateNotification();
        }

        if (CHROME_5_LOCAL && !$('body').attr('pluginDetected')) {
            window.location = 'resources/chrome/chrome.html';
        }

        if (FIREFOX && BROWSER_VERSION >= 68 && document.location.href.indexOf('file://') >= 0) { //detecting firefox and local
            window.location = 'resources/chrome/firefox.html';
        }
    });

不过很抱歉，上面的代码只适用于Axure8.0修改index.html和Start.html页面的做法，Axure9.0后这种方式彻底失效了~ 

Axure9.0的做法需要修改两个地方：

步骤一：找到你本地导出的原型目录resources\scripts\player\axplayer.js这个js文件，打开后删除或注释chrome.html相关代码window.location = 'resources/chrome/chrome.html' 和 window.location = 'resources/chrome/firefox.html' 这是第一步的注释操作；

        if (CHROME_5_LOCAL && !$('body').attr('pluginDetected')) {
            window.location = 'resources/chrome/chrome.html';
        }

        if (FIREFOX && BROWSER_VERSION >= 68 && document.location.href.indexOf('file://') >= 0) { //detecting firefox and local
            window.location = 'resources/chrome/firefox.html';
        }

找到这一块删除掉【好像Axrue7/8只要这一步就能正常使用了】

步骤二：找到你本地导出的原型目录resources\css\default.css这个css文件，记事本右键打开后，或者通过代码编辑器打开后找到#mainPanel 下 opacity:0;修改为opacity: 1 !important; 

修改前的图如下：

#mainPanel {
    background-color: #d8d8d8;
    opacity: 0; 
    flex: 1;
    overflow: hidden;
}

修改后的图如下：

#mainPanel {
    background-color: #d8d8d8;
    opacity: 1 !important; 
    flex: 1;
    overflow: hidden;
}

即的opacity改为1 !important ；针对引入了!important 声明，用来帮助开发者和用户在改变样式表时，轻松覆盖常规特异性。如果大家有兴趣的话可以去百度深度了解这些Css相关的知识~

希望以上内容的这些小技巧能帮到产研团队日常工作中的需求评审等等工作