Use a srcdoc attribute on iframes (#96)

Author: dstein64

branca/element.py

@@ -7,10 +7,10 @@
 """
 
 import base64
+from html import escape
 import json
 import warnings
 from collections import OrderedDict
-import urllib.parse
 from urllib.request import urlopen
 from uuid import uuid4
 
@@ -320,43 +320,26 @@ def render(self, **kwargs):
         return self._template.render(this=self, kwargs=kwargs)
 
     def _repr_html_(self, **kwargs):
-        """Displays the Figure in a Jupyter notebook.
-
-        Percent-encoded HTML is stored in data-html attribute, which is used to populate
-        the iframe. This approach does not encounter the 2MB limit in Chrome for storing
-        the HTML in the src attribute with a data URI. The alternative of using a srcdoc
-        attribute is not supported in Microsoft Internet Explorer and Edge.
-
-        """
-        html = urllib.parse.quote(self.render(**kwargs))
-        onload = (
-            'this.contentDocument.open();'
-            'this.contentDocument.write('
-            '    decodeURIComponent(this.getAttribute(\'data-html\'))'
-            ');'
-            'this.contentDocument.close();'
-        )
-
+        """Displays the Figure in a Jupyter notebook."""
+        html = escape(self.render(**kwargs))
         if self.height is None:
             iframe = (
                 '<div style="width:{width};">'
                 '<div style="position:relative;width:100%;height:0;padding-bottom:{ratio};">'  # noqa
                 '<span style="color:#565656">Make this Notebook Trusted to load map: File -> Trust Notebook</span>'  # noqa
-                '<iframe src="about:blank" style="position:absolute;width:100%;height:100%;left:0;top:0;'  # noqa
+                '<iframe srcdoc="{html}" style="position:absolute;width:100%;height:100%;left:0;top:0;'  # noqa
                 'border:none !important;" '
-                'data-html={html} onload="{onload}" '
                 'allowfullscreen webkitallowfullscreen mozallowfullscreen>'
                 '</iframe>'
                 '</div></div>'
-            ).format(html=html, onload=onload, width=self.width, ratio=self.ratio)
+            ).format(html=html, width=self.width, ratio=self.ratio)
         else:
             iframe = (
-                '<iframe src="about:blank" width="{width}" height="{height}"'
+                '<iframe srcdoc="{html}" width="{width}" height="{height}"'
                 'style="border:none !important;" '
-                'data-html={html} onload="{onload}" '
                 '"allowfullscreen" "webkitallowfullscreen" "mozallowfullscreen">'
                 '</iframe>'
-            ).format(html=html, onload=onload, width=self.width, height=self.height)
+            ).format(html=html, width=self.width, height=self.height)
         return iframe
 
     def add_subplot(self, x, y, n, margin=0.05):