How to config WebView to solve the Browser Compatibility

149 views
Skip to first unread message

Richard

unread,
Jul 10, 2014, 12:09:25 AM7/10/14
to pdfnet-w...@googlegroups.com
Hi 

I have some question about how to config WebView to solve the Browser Compatibility. Here are my configuration about webview.

<html>
<head>
<title>Viewer Test</title>
<script type="text/javascript" src="resources/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="WebViewer.min.js"></script>
<script type="text/javascript" src="WebViewer.js"></script>
</head>
<body>

<script type="text/javascript">
   
    $(document).ready(function () {

        // Read a page's GET URL variables and return them as an associative array.
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        var doc = getUrlVars()["cloudApiId"];
        var user = getUrlVars()["u"];
        var docId = getUrlVars()["id"];
        var readonly = getUrlVars()["enableReadOnlyMode"] == "true" ? true : false;
        var offlineMode = getUrlVars()["enableOfflineMode"] == "true" ? true : false;
        var showTB = getUrlVars()["showToolbarControl"] == "true" ? true : false;
        var sOffline = getUrlVars()["startOffline"] == "true" ? true : false;
        var admin = getUrlVars()["admin"] == "true" ? true : false;
        var annotate = getUrlVars()["annotate"] == "true" ? true : false;


        var viewerElement = document.getElementById('viewer');
        var myWebViewer = new PDFTron.WebViewer({
            type: "html5,Silverlight,flash",                       //--
            //initialDoc: doc,  //URL path to the document
            cloudApiId: doc, 
            enableAnnotations: annotate,
            documentId: docId,
            mobileRedirect: false,
            streaming: true,      //set streaming to 'true' if your .xod server doesn't acknowledge byte-ranges
            showToolbarControl: showTB,
            enableReadOnlyMode: readonly,
            enableOfflineMode: offlineMode,
            startOffline: false,
            annotationAdmin: admin,
            annotationUser: user
        }, viewerElement);
       // debugger;
        $(viewerElement).bind('ready', function (event) {
            myWebViewer.setToolMode("Pan");
        });

    });

</script>

<div id="Div1"></div>

<div id="viewer" style="height:900px;"></div>

</body>
</html>

I can view the xod in Chrome FF, but fail in IE9.8.7 etc. By the way, I want to use the annotation feature, but from the demo in your site, I have found that it wouldn't show the annotation tab in IE7 or IE8. The demo link: http://www.pdftron.com/webviewer/demo/samples/universal/

How to config the webview and make it sense for more browsers.

Regards,
Richard

Matt Parizeau

unread,
Jul 10, 2014, 3:25:38 PM7/10/14
to pdfnet-w...@googlegroups.com
Hi Richard,

Any browsers that support the canvas element will use the HTML5 viewer and in that demo annotations are enabled. IE9 does have the canvas element so I'm not quite sure why this didn't work for you. When you say it "failed" what do you mean exactly?

Browsers that don't support canvas will fallback to either Silverlight or Flash depending on the order you list them in and if the browser has Silverlight or Flash installed. The Silverlight viewer supports annotations (though not as many as the HTML5 viewer) and the Flash viewer does not support annotations at all. So if your IE8 or 7 did not have Silverlight installed and the Flash viewer was being used then the annotations wouldn't be shown. However it does seem like when using the universal sample annotations aren't enabled for the Silverlight viewer so I'll look into this.

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Matt Parizeau

unread,
Jul 14, 2014, 3:42:09 PM7/14/14
to pdfnet-w...@googlegroups.com
You can enable annotations for Silverlight by changing settings.js and removing the code that sets:
silverlightOptions: {
    enableAnnotations: false
}

Matt Parizeau
Software Developer
PDFTron Systems Inc.
Reply all
Reply to author
Forward
0 new messages