In [44]:
%%HTML
<div id='out'></div>
<script>
function callback(msg) {
   var ret = msg.content.data['text/plain'];
   $('#out').text('Value: ' + ret);
}
IPython.notebook.kernel.execute('2+2', {iopub: {output: callback}}, {silent: false});
</script>



In [58]:
# iframe_with_source wraps HTML+javascript into an iframe, to avoid DOM and javascript conflicts

from IPython.display import HTML
import json

def iframe_with_source(source, height='200px'):
    name = 'iframe-%d' % get_ipython().execution_count
    source = json.dumps(source).replace('</script', '</scr"+"ipt')
    template = """
<iframe id="%s" style="width:100%%; height:%s"></iframe>
<script>
document.getElementById('%s').srcdoc = %s;
</script>
"""
    # Fill in the %s slots with id, width, height, and the HTML source
    return HTML(template % (name, height, name, source))

In [59]:
# Talk to kernel from inside iframe

source = """
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
IPython = parent.IPython;
function callback(msg) {
   var ret = msg.content.data['text/plain'];
   $('#out').text('Value: ' + ret);
}
IPython.notebook.kernel.execute('2+2', {iopub: {output: callback}}, {silent: false});
</script>
</head>
<body>
<div id="out"></div>
</html>"""

iframe_with_source(source, height='100px')


Out[59]:

In [39]:
hithere


Out[39]:
99

In [ ]: