Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
scrolling in iframe on ipad/iphone don't work. Is there any workaround available?
Thanks for the help!
Andi
Hi Andi,
How do you scroll the iframe? By one finger or two? (where 'one' is scroll and 'two' is move, if memory serves)
However, this may caused by the size of iframe not matched to its content, something like below may work:
<zk xmlns:w="client">
<script type="text/javascript">
function fixSize(wgt) {
setTimeout(function () {
var iframe = wgt,
iframeHTML = iframe.contentWindow.document.lastChild;
iframe.style.width = "";
iframe.style.height = "";
iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
}, 0);
}
</script>
<iframe id="iframe" src="http://localhost:8081/zksandbox/test.zul" xmlns:ca="client/attribute"
ca:onload="fixSize(this);">
</iframe>
<button label="change src">
<attribute name="onClick">
iframe.setSrc("http://localhost:8081/zksandbox/test2.zul");
</attribute>
</button>
</zk>
Regards,
Ben
Hi Ben,
thanks for your answer, but it does not work. I scroll with one finger. I set the "src" from the iFrame in Controller because the src changes often. Here is my code with your example:
<?page title="iframe_scroll"?>
<?meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" ?>
<?meta name="apple-mobile-web-app-capable" content="yes" ?>
<?meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" ?>
<zk xmlns:w="client">
<window id="pdfWin" height="100%" width="100%" apply="iframe.testCtrl">
<caption label="mybigpoint" image="img/mini_logo.png">
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" width="100%">
<toolbar align="start" style="float:left; border-style: none;"></toolbar>
<toolbar align="center" style="float:left; border-style: none;"></toolbar>
<toolbar align="end" style="float:right; border-style: none;" >
<button id="btclose" label="Close" style="font-size:12px;"/>
</toolbar>
</hbox>
</div>
</caption>
<style dynamic="true">
body {
padding:0px;
}
.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover {
background-color:transparent;
border:0 none;
}
</style>
<iframe id="iFrame">
<attribute w:name="bind_">
function (desktop, skipper, after) {
this.$bind_(desktop, skipper, after);
setTimeout (function () {
var iframe = this.$n(),
iframeHTML = iframe.contentWindow.document.lastChild;
iframe.style.width = "";
iframe.style.height = "";
iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
}, 100);
}
</attribute>
</iframe>
</window>
</zk>
public void onCreate() throws Exception {
iFrame.setSrc("http://www.zkoss.org/");
Please have a look on the code and give me a tip!
Andi
Hi Andi,
Please try this (only works in the same domain):
<zk xmlns:w="client">
<script type="text/javascript">
function fixSize(wgt) {
setTimeout(function () {
var iframe = wgt,
iframeHTML = iframe.contentWindow.document.lastChild;
iframe.style.width = "";
iframe.style.height = "";
iframe.style.width = (iframeHTML.scrollWidth+10) + "px";
iframe.style.height = (iframeHTML.scrollHeight+10) + "px";
}, 0);
}
</script>
<iframe id="iframe" src="http://localhost:8081/zksandbox/test.zul" xmlns:ca="client/attribute"
ca:onload="fixSize(this);">
</iframe>
<button label="change src">
<attribute name="onClick">
iframe.setSrc("http://localhost:8081/zksandbox/test2.zul");
</attribute>
</button>
</zk>
Regards,
Ben
Hi Richard,
I've created a feature request: Add an attribute to make iframe sized by content
Regards,
Ben
Asked: 2012-07-06 16:22:23 +0800
Seen: 814 times
Last updated: Oct 15 '12
