我需要扩展的iframe,使之更大的(我在iframe的内容的源代码没有控制)。 我试图通过实现它-webkit-transform: scale(1.3)
CSS属性。
IFrame的内容是正确的扩大,但是当我尝试触摸任何控件中的iframe,则似乎是在错误的位置接收触摸事件(我可以看到控制的“影子”是在突出在触摸错误的地方)。 因此事件处理程序不工作(我怀疑他们没有得到所谓的,因为触摸是在错误的地点检测)。 有没有人遇到过这个问题? 这能解决吗?
我创建了产生问题(尝试在iPad上的Safari)测试用例: http://jsfiddle.net/9vem2/
源在一个更可读的形式:
父页面(iframe的容器):
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style type="text/css">
iframe
{
left: 200px;
-webkit-transform: scale(1.3);
}
</style>
</head>
<body>
<h2>Parent</h2>
<iframe src="child.html"></iframe>
</body>
</html>
子页面(iframe中的内容):
<!DOCTYPE html>
<html>
<head>
<title>Child</title>
</head>
<body>
<h2>Child</h2>
<input type="text"></input>
<button onclick="alert('hello');">Button</button>
</body>
</html>