如何使一个 HTML 文件中的触摸事件影响另一个 HTML 文件中的内容？

【问题标题】：How to make touch event in one HTML file effect things in a separate HTML file?如何使一个 HTML 文件中的触摸事件影响另一个 HTML 文件中的内容？
【发布时间】：2014-02-14 19:59:23
【问题描述】：

我不确定这是否可能，这就是我的意思：

我有一个触摸事件来隐藏/显示每小时预报，但现在我需要在单独的 HTML 文件上制作触摸事件，所以当我在一个 html 文件上点击触摸事件时，预测（显示在单独的 html文件）会消失，可以这样做吗？

这是我所有触摸事件的 js 文件：

// UniAW6.4LS By Ian Nicoll and Dacal

var forecastdisplay = true;
var hourlyforecastdisplay = true;
var slideshow = false;
var optiondisplay = false;
var weatherdisplay = true;
var weatherBGdisplay = true;
var clockdisplay = true;
var timedwalls = false;
var disabletouch = false;
var windeffectdisplay = true;
var prev_wind_effects = wind_effects; // TO REVERT BACK...
var touchdownX;
var touchupX;
var touchX;
var stateX = 0;
var stateY = 0;

if (ChangeClick == false) { var touchmode = "touchend"; } else { var touchmode = "click"; }

function StartTouch() {

if (ChangeClick == false) { 
document.getElementById("HourlyTouchLayer").addEventListener("touchstart", touchStart, false); // FOR THE  HOURLY FORECAST
document.getElementById("HourlyTouchLayer").addEventListener("touchmove", touchMove, false); // FOR THE  HOURLY FORECAST
} else {
document.getElementById("HourlyTouchLayer").addEventListener("mousedown", mouseDown, false); // FOR THE  HOURLY FORECAST
document.getElementById("HourlyTouchLayer").addEventListener("mouseup", mouseUp, false); // FOR THE  HOURLY FORECAST
}

document.getElementById("TouchLayer").addEventListener(touchmode, touchEnd, false); // FOR THE FORECAST
document.getElementById("TouchLayer2").addEventListener(touchmode, touchEnd2, false); // FOR THE OPTIONS
}

function touchEnd() {
if (forecastdisplay == false) {
    document.getElementById('TouchForecast').className = "forecastMoveUp";
    forecastdisplay = true;
} else {
    document.getElementById('TouchForecast').className = "forecastMoveDown";
    forecastdisplay = false;
}
if (updateFileTimer != "") { createOptionsCookie(); }
}

function touchEnd2(event) {
event.preventDefault();
if (optiondisplay == false) {
    document.getElementById("optionContainer").style.zIndex= "1000";
    document.getElementById("optionContainer").className = "fade-in-option";
    StartButtons();
    optiondisplay = true;
} else {
    document.getElementById("optionContainer").style.zIndex= "800";
    document.getElementById("optionContainer").className = "fade-out-option";
    StopButtons();
    optiondisplay = false;
}
}

function touchStart(event) {
event.preventDefault();
touchdownX = event.targetTouches[0].pageX;
}

function touchMove(event) {
event.preventDefault();
touchupX = event.targetTouches[0].pageX;
touchX = touchupX - touchdownX;
if  (touchX != 0) { MoveElementX(); }
}

function mouseDown(event) {
event.preventDefault();
touchdownX = event.pageX;
}

function mouseUp(event) {
event.preventDefault();
touchupX = event.pageX;
touchX = touchupX - touchdownX;
if  (touchX != 0) { MoveElementX(); }
}


function MoveElementX() {
if (hourlyforecastdisplay == true) {
    switch (stateX) {
        case 0 :
        if ( touchX < 0 ) {
        document.getElementById("hourlyforecast").className = "forecastTranslateLeft";
        stateX++;
        }
        break;
        case 1 :
        if ( touchX > 0 ) {
        document.getElementById("hourlyforecast").className = "forecastTranslateRight";
            stateX--;
            } 
        break;
    }
}
}

function StartButtons() {
document.getElementById("refresh").addEventListener(touchmode, touchRefresh, false);
document.getElementById("timedwall").addEventListener(touchmode, touchTimewall, false);
document.getElementById("slideshow").addEventListener(touchmode, touchSlideShow, false);
document.getElementById("hideweatherInfo").addEventListener(touchmode, touchHideWeather, false);
document.getElementById("hideweatherBG").addEventListener(touchmode, touchHideWeatherBG, false);
document.getElementById("hideclock").addEventListener(touchmode, touchHideClock, false);
document.getElementById("disableforcasttouch").addEventListener(touchmode, touchDisableForecast, false);
document.getElementById("windeffect").addEventListener(touchmode, touchWindeffect, false);
document.getElementById("disablehourlyforcast").addEventListener(touchmode, touchHideHourlyForecast, false);
document.getElementById("refresh").innerHTML = "Reload (for a fresh start)";
document.getElementById("timedwall").innerHTML = "Launch Timed Walls";
document.getElementById("slideshow").innerHTML = "Launch the Slideshow";
document.getElementById("hideweatherInfo").innerHTML = "Hide all weather information";
document.getElementById("hideweatherBG").innerHTML = "Hide all overlay";
document.getElementById("hideclock").innerHTML = "Hide the clock";
document.getElementById("disableforcasttouch").innerHTML = "Disable forecast touch";
document.getElementById("windeffect").innerHTML = "Disable Wind Effect";
document.getElementById("disablehourlyforcast").innerHTML = "Hide Hourly Forecast";
}

function StopButtons() {
document.getElementById("refresh").removeEventListener(touchmode, touchRefresh, false);
document.getElementById("timedwall").removeEventListener(touchmode, touchTimewall, false);
document.getElementById("slideshow").removeEventListener(touchmode, touchSlideShow, false);
document.getElementById("hideweatherInfo").removeEventListener(touchmode, touchHideWeather, false);
document.getElementById("hideweatherBG").removeEventListener(touchmode, touchHideWeatherBG, false);
document.getElementById("hideclock").removeEventListener(touchmode, touchHideClock, false);
document.getElementById("disableforcasttouch").removeEventListener(touchmode, touchDisableForecast, false);
document.getElementById("windeffect").removeEventListener(touchmode, touchWindeffect, false);
document.getElementById("disablehourlyforcast").removeEventListener(touchmode, touchHideHourlyForecast, false);
}

function touchRefresh() {
event.preventDefault();
$.removeCookie('optionsCookie');
window.location.reload();
}

function touchTimewall() {
if (timedwalls == false) {
    if (slideshow == true) { touchSlideShow(); }
    timedwalls = true;
    Wallpaper_options = 'timedwalls';
    document.getElementById("backgroundContainer").className = "fade-out-wall";
    document.getElementById("timedwall").className = "TextColorGreen";
} else {
    timedwalls = false;
    wpidx = "-1";
    WPfade_inTW.className='fade-out-wall';
    WPfade_outTW.className='fade-out-wall';
    document.getElementById("backgroundContainer").className = "fade-in-wall";
    document.getElementById("timedwall").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchSlideShow() {
if (slideshow == false) {
    if (timedwalls == true) { touchTimewall(); } // STOP THE TIMED WALL
    widgetStart();
    slideshow = true;
    Wallpaper_options = 'slideshow';
    document.getElementById("slideshow").className = "TextColorGreen";
    if (filename != "") {
        clearInterval(meteorTimer);
        delelement("astronautContainer");
        delelement("fogContainer");
        delelement("starContainer");
        delelement("meteorContainer");
        delelement("frameContainer");
        delelement("cloudContainer");
        delelement("dropContainer");
        delelement("circleContainer");
        delelement("wiperContainer");
        delelement("starsBGContainer");
        delelement("windContainer");
        delelement("windmillContainer");
        delelement("big_balloonContainer");
        delelement("small_balloonContainer");
        delelement("birdsContainer");
        delelement("frostContainer");
        if (Show_wind_effects == true) {
                removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "css");
                removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "js");
                Show_wind_effects = false;                  
        }
        if (Show_frost == true) {
                removejscssfile("Weather/" + iPhoneType, "frost_effect", "css");
                removejscssfile("Weather/" + iPhoneType, "frost_effect", "js");
                Show_frost = false;
        }   
        removejscssfile("Weather/"+iPhoneType, filename, "css");
        removejscssfile("Weather/"+iPhoneType, filename, "js");
    }
    document.getElementById("sun_moonContainer").className = "fade-out-wall";
    document.getElementById("backgroundContainer").className = "fade-out-wall";
} else {
    widgetStop();
    slideshow = false;
    if (filename != "") {
        loadjscssfile ("Weather/"+iPhoneType, filename, "css");
        loadjscssfile ("Weather/"+iPhoneType, filename, "js");
        if (Start_wind_effects == true) {
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "css");
            loadjscssfile ("Weather/"+iPhoneType,wind_effects+"_effects", "js");
            Show_wind_effects = true;
        }
        if (Start_frost == true) {
            loadjscssfile("Weather/" + iPhoneType, "frost_effect", "css");
            loadjscssfile("Weather/" + iPhoneType, "frost_effect", "js");
            Show_frost = true;
        }           
    }
    document.getElementById("sun_moonContainer").className = "fade-in-wall";
    document.getElementById("backgroundContainer").className = "fade-in-wall";
    document.getElementById("slideshow").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideWeather() {
if (weatherdisplay == true) {
    document.getElementById("WeatherInfo").className = "fade-out-wall";
    document.getElementById("forecastInfo").className = "fade-out-wall";
    document.getElementById("hourlyforecast").className = "fade-out-wall";
    weatherdisplay = false;
    document.getElementById("hideweatherInfo").className = "TextColorGreen";
} else {
    document.getElementById("WeatherInfo").className = "fade-in-wall";
    document.getElementById("forecastInfo").className = "fade-in-wall";
    document.getElementById("hourlyforecast").className = "fade-in-wall";
    weatherdisplay = true;      
    document.getElementById("hideweatherInfo").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideClock() {
if (clockdisplay == true) {            
    document.getElementById("clockContainer").className = "fade-out-wall";
    clockdisplay = false;                      
    document.getElementById("hideclock").className = "TextColorGreen";
} else {
    document.getElementById("clockContainer").className = "fade-in-wall";
    clockdisplay = true;                       
    document.getElementById("hideclock").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideWeatherBG() {
if (weatherBGdisplay == true) {
    document.getElementById("forecastbg").style.display = 'none';
    document.getElementById("hourlyforecastbg").style.display = 'none';
    document.getElementById("WeatherInfoBG").className = "fade-out-wall";
    weatherBGdisplay = false;           
    document.getElementById("hideweatherBG").className = "TextColorGreen";
} else {
    document.getElementById("forecastbg").style.display = 'block';
    document.getElementById("hourlyforecastbg").style.display = 'block';
    document.getElementById("WeatherInfoBG").className = "fade-in-wall";
    weatherBGdisplay = true;        
    document.getElementById("hideweatherBG").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchDisableForecast() {
if (disabletouch == true) {
    document.getElementById("TouchLayer").addEventListener(touchmode, touchEnd, false);
    disabletouch = false;       
    document.getElementById("disableforcasttouch").className = "TextColorWhite";
} else {
    document.getElementById("TouchLayer").removeEventListener(touchmode, touchEnd, false);
    disabletouch = true;        
    document.getElementById("disableforcasttouch").className = "TextColorGreen";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchWindeffect() {
if (windeffectdisplay == true) {
    prev_wind_effects = wind_effects;
    wind_effects = "none";
    Start_wind_effects = false;
    windeffectdisplay = false;
    document.getElementById("windeffect").className = "TextColorGreen";
    if (Show_wind_effects == true) {
        delelement("windContainer");
        delelement("windmillContainer");
        removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "css");
        removejscssfile("Weather/"+iPhoneType, wind_effects+"_effects", "js");
        Show_wind_effects = false;      
    }
} else {
    wind_effects = prev_wind_effects;
    if ((filename != "") && (slideshow == false) && (Show_wind_effects == false)) {
        if ((Math.round(obj.windspeed) >= Strong_Wind) && (filename != "windy")  && (wind_effects != "none")) { Start_wind_effects = true; } else { Start_wind_effects = false; }           
        if (Start_wind_effects == true) {
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "css");
            loadjscssfile ("Weather/"+iPhoneType, wind_effects+"_effects", "js");
            Show_wind_effects = true;
        }
    }
    windeffectdisplay = true;
    document.getElementById("windeffect").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function touchHideHourlyForecast() {
if (hourlyforecastdisplay == true) {            
    document.getElementById("hourlyforecast").className = "fade-out-wall";
    document.getElementById("hourlyforecastbg").style.display = 'none';
    hourlyforecastdisplay = false;                      
    document.getElementById("disablehourlyforcast").className = "TextColorGreen";
} else {
    document.getElementById("hourlyforecast").className = "fade-in-wall";
    document.getElementById("hourlyforecastbg").style.display = 'block';
    hourlyforecastdisplay = true;                       
    document.getElementById("disablehourlyforcast").className = "TextColorWhite";
}
if (optiondisplay == true) { createOptionsCookie(); } // SAVE THE CONFIGURATION
}

function createOptionsCookie() {
var options = {};
options.slideshow = slideshow;
options.clockdisplay = clockdisplay;
options.weatherdisplay = weatherdisplay;
options.timedwalls = timedwalls;
options.weatherBGdisplay = weatherBGdisplay;
options.disabletouch = disabletouch;
options.forecastdisplay = forecastdisplay;
options.windeffectdisplay = windeffectdisplay;
options.hourlyforecastdisplay = hourlyforecastdisplay;
var optionsTmp = JSON.stringify(options);
$.cookie('optionsCookie', optionsTmp, {expires: 365});
}

【问题讨论】：

  • 这两个页​​面是否在同一台计算机上的同一浏览器中运行？
  • 是的，它实际上是我在 3 或 4 年前开始使用的 iPhone 天气小部件，现在它已经变得很大，下载链接在我下面对 Michael 的评论中。

标签： javascript css html


【解决方案1】：

接收触摸事件的页面是否有对预测页面的引用（或可以获得引用）？例如，预测页面是否在原始页面内的iframe 中？

如果是这样，您可以使用postMessage() 从原始页面与预测页面进行通信。

OTOH，如果预测页面位于 iframe 内，而您要做的只是完全删除预测，那么您真正需要做的就是让原始页面从 DOM 中删除 iframe。

我很乐意更详细地讨论任何方法，但首先如何提供有关这些页面及其加载方式的更多信息？

【讨论】：

  • 我没有使用 iFrame，这里有太多代码要发布，你可以在这里获取我的完整小部件：mediafire.com/download/ae0pnug4den76cg/… 要测试首先转到 Config.js 文件并设置 var XML_TEST =真； & var ChangeClick = true;我知道我在这里问了很多，所以如果你没有时间完全理解，但我想你会喜欢这个小部件。谢谢。
【解决方案2】：

如果不开发数据驱动的后端（PHP、Node、RoR - 列举最流行的），您最好的选择可能是使用LocalStorage。 

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

在处理触摸事件时，您可以使用localStorage 设置一个变量，然后在另一个 HTML 页面中，查找相应的项目并根据该值的值（或缺少该值）进行操作。

您可能还想挂接到 localStorage 更改事件 - 只需 "storage"：

HTML5 / JS storage event handler

document.addEventListener('storage', storageEventHandler, false);

var storageEventHandler = function(event){
    //do something
}

【讨论】：

  • 请注意，这将仅在本地工作（希望这是一个废话）。例如，在一台机器上查看的 HTML 页面将无法访问另一台机器的localStorage。根据您的应用程序所需的功能，这可能会或可能不会考虑。
  • 谢谢，这对我来说是一个可行的选择，谢谢你的想法。如果您想查看我正在使用的内容，请从我在 Michael 帖子中的其他评论中下载我的完整小部件，这与 IOS7 处理锁定屏幕的新方式有关，它无法处理顶部的所有动画层，所以我现在需要将它们与触摸事件分开。这对我来说只是一种爱好，所以我没有那么有经验。 :(
  • 您可能不会让 SO 上的任何人从 mediafire 之类的地方下载任何内容 - 特别是有 16 个代表且没有用户名，无意冒犯。至于经验，爱好发展是获得更多经验的最佳方式（恕我直言），所以继续努力吧！
  • 是的，我想它看起来确实有点可疑，但我可以向你保证，它也可以在这里找到：modmyi.com/forums/iphone-4-4s-new-skins-themes-launches/… 但链接只是指向同一个地方。嗯，至少我有一些想法在这里，再次感谢。伊恩·尼科尔。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-25
  • 2019-01-04
  • 2023-04-02
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode