magaravirb
New Member
I have been struggling a lot implementing the zoom in/out feature for an iframe tag. This is a MooTools based scroller. How do i access the innerHTML of an iframe and magnify it via scroller. \[quote\] jsfiddle here: http://jsfiddle.net/nuthan/xExXv/ This piece of code magnifies the div tag sample content. I need to implement the same on the iframe, how do i do it? the iframe has to fit its bookview tag.\[/quote\]\[code\]<script>var iframeEl = document.getElementById('book-frame');console.log(iframeEl.contentWindow.frameElement.contentDocument.body.innerHTML); /*No logs here, not able to access the iframe innerHTML*/</script><!--script for sliding the content and generate the zoom of the whole div--><script>window.addEvent('domready', function(){var slider = $('slider');var iframeEl = document.getElementById('book-frame');console.log(iframeEl.contentWindow.frameElement.contentDocument);iframeEl.contentDocument.getElementById('ext-gen1012');new Slider(slider, slider.getElement('.knob'), {range: [9, 35],initialStep: 14,onChange: function(value){console.log(value); if (value) $('fontSize').setStyle('font-size', value); /*$('bookview') does not zoom the iframe*/ } }); });</script><!--The iframe loading an HTML5 pages(e.g., jquery, Sencha)--><div id="bookview" style="width:973px;height:600px;"><iframe id="book-frame" class="zoom" width="100%" height="70%" src="http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo"></iframe></div><!--Slider to magnify the whole content within the iframe--><div id="slider" class="slider"> <div class="knob"></div></div>\[/code\]