gpt4 book ai didi

iframe - sencha touch::如何在 iFrame 内创建网站预览面板

转载 作者:行者123 更新时间:2023-12-02 09:05:17 24 4
gpt4 key购买 nike

我需要允许在 sencha touch 内预览一些网站。我看到两种不同的可能性:

  1. 打开 safariMobile 应用程序以显示链接
  2. 在“html”属性内生成一个带有 iFrame 的面板。

因为我不知道如何实现1。我从2开始。但遇到了一些麻烦:

a) 我的 iFrame 的内容不可滚动。如果我尝试滚动内容,整个视口(viewport)都会滚动,包括我的底部选项卡面板按钮!

b) 显示的网站似乎可以在没有任何 CSS 或图像的情况下加载

这是我的预览面板代码:

app.views.WebsitePreview = Ext.extend(Ext.Panel, {
layout: 'card',
scroll: 'vertical',
styleHtmlContent: true,
fullscreen: true,

initComponent: function(){
this.html = '<iframe width="100%" height="100%" src="'+ this.theLink + '"></iframe>',
var toolbarBase = {
xtype: 'toolbar',
title: 'Vorschau ' //+ this.childData.childUsername,
};


if (this.prevCard !== undefined) {
toolbarBase.items = [
{
xtype: 'button',
ui: 'back',
text: 'zurück', //this.prevCard.title,
scope: this,
handler: function(){
this.baseScope.setActiveItem(this.prevCard, { type: 'slide', reverse: true });
}
}
]
};

this.dockedItems = toolbarBase;
app.views.WebsitePreview.superclass.initComponent.call(this);
}
});

Ext.reg('websitepreview', app.views.WebsitePreview);

感谢您的帮助!

最佳答案

我花了两天时间来解决同样的问题。看来终于找到解决办法了。

您应该尝试的第一件事是使用 iOS 5 中引入的新内置功能。<​​/p>

-webkit-overflow-scrolling:touch;

您需要用 div 包裹您的 iframe,例如:

...
this.html = '<div style="-webkit-overflow-scrolling:touch; height: 500px; overflow: auto;"><iframe .../></div>'
...

如果它不起作用(在我的例子中它只在第一次起作用)那么你可以尝试自己处理触摸事件。假设 html 中有以下结构:

<div id="wrapper">
<iframe id="my-iframe" .../>
</div>

要使 iframe 可滚动,您需要添加此 JS

var startY = 0;
var startX = 0;
var ifrDocument = document.getElementById("my-iframe").contentWindow.document;
ifrDocument.addEventListener('touchstart', function (event) {
window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
ifrDocument.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = document.getElementById("wrapper");
var sty = h.scrollTop;

var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});

第二个解决方案的来源是 here

关于iframe - sencha touch::如何在 iFrame 内创建网站预览面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6139457/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com