我有一个网站,https://coolkids.gq。 我在这个网站上问了很多问题,因为我已经通过许多不同的方法试图创建完美的非代理网站克隆脚本。
这个(希望如此!) 将是这件事的最后一个问题。 最后一个问题是iOS。 有一个奇怪的滚动效果,你可以继续滚动/橡皮带过去的主要区域的页面,你可以正常看到。 这意味着您可以看到通常隐藏在边缘后面的东西。 在我的例子中,如果你使用iOS,特别是safari,你可以在iframe上向上滚动,看到一条来自我为主页使用的“CMS”的广告横幅,我通过将iframe的50像素隐藏在页面上方来隐藏主页。
我需要为iOS加载一个单独的样式表来解决这个问题,这使得页面和iframe非常长,然后阻止人们在iframe内部滚动,但允许他们滚动主体,允许他们看到iframe的其余部分,因为它在非常长的页面上处于固定的位置。
首先,我如何使它使用户不能在iframe中滚动(它是跨域的,我对它没有太多的控制),但仍然可以触摸其中的按钮?
第二,如何使用JavaScript更改CSS? 下面是我到目前为止尝试过的代码:
null
var _iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
if (_iOSDevice == ‘true’) {
document.html.style.height = “400 % ”;
document.html.style.overflow = “hidden”;
document.maincode.style.min - height = “calc(1000 % +50 px)”;
alert(“iOS is being used”);
} else if (_iOSDevice == ‘false’) {
alert(“iOS is not being used”);
}
null
警报只是为了测试目的而存在的。
检测是否使用了iOS的位可以正常工作--我通过放置alert(_iosdevice)
来测试它,它在iOS上总是报警为true,但在其他地方总是报警为false。
但是,我的if(){}
代码似乎不起作用,因为CSS在iOS上没有更改,而且两个测试alert()
系统都不起作用。
那么我该如何:
对于第2个,我想我要做一个很长的页面,然后拉伸iframe以适应它,这样它就不需要滚动了,因为页面总是适合它,然后在iframe中禁用滚动,但我不知道怎么做。
您可以使用vanilla js:
var element = document.querySelector('div[id=divId]');
element.setAttribute('class', 'class1 class2 class3'); // Set the classes
您可以使用vanilla js设置样式:
element.setAtttribute('style', 'top:33px;background-position: 1251px 0px;'); // add your custom css
您可以使用jQuery添加或删除css类:
$('div#divId').addClass('hidden');
$('div#divId').removeClass('hidden');
我看了一下你的页面,我想你想阻止用户向上滚动,但让他们向下滚动? 如果是这样,您可以通过设置display:none来隐藏该元素。
当我在iPhone上开发Safari时,我发现在页面底部有一个javascript控制台(hnl.mobileonsole.js)用于调试非常方便。