1. 首頁
  2. 問答
  3. 如何使一個HTML文件中的觸摸事件在單獨的HTML文件中生效？

如何使一個HTML文件中的觸摸事件在單獨的HTML文件中生效？

2014-02-14 38 views
1

我不確定這是否可能，下面是我的意思：如何使一個HTML文件中的觸摸事件在單獨的HTML文件中生效？

我有一個觸摸事件來隱藏/顯示小時預測，但現在我需要在單獨的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}); 
}

來源

2014-02-14 user2253720

+0

這兩個頁面在同一臺計算機上的同一瀏覽器上運行嗎？ – nullability

+0

是的，它實際上是我在大約3或4年前開始的iPhone天氣小部件，現在它已經變得非常大，下載鏈接在我對下面的Michael的評論中。 – user2253720

回答

1

沒有開發數據驅動的後端（PHP，節點，回報率 - 說出最流行的），你最好的選擇可能與工作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 
}

來源

2014-02-14 20:03:04

+0

請注意，這將**只在本地工作（希望這是一個）。例如，在一臺機器上查看的HTML頁面將無法訪問另一臺機器的'localStorage'。根據您的應用程序的所需功能，這可能會或可能不會被考慮。 –

+0

謝謝，在我的情況下，這是一個可行的選擇，謝謝你的想法。如果你想看看我在做什麼，請從我在Michael的帖子中的其他評論中下載我的完整小部件，這一切都與IOS7處理鎖屏的新方式有關，它無法處理頂部的所有動畫層，所以我現在需要將它們與觸摸事件分開。這對我來說只是一種愛好，所以我沒有那麼有經驗。 :( – user2253720

+0

你可能不會讓任何人從這樣的地方下載任何東西，比如mediafire--尤其是16代表，並且沒有用戶名，沒有任何意圖。至於經驗，愛好是最好的方式（恕我直言）更多的，所以只是保持建設！ –

1

是否接收觸摸事件有一個參考的頁面（或可以得到的引用）的預測頁面？例如，原始頁面內的iframe預測頁面是？

如果是這樣，您可以使用postMessage()從原始頁面與預測頁面進行通信。

OTOH，如果預測頁面在iframe之內，並且您想要做的只是完全刪除預測，那麼您真正需要做的就是讓原始頁面從DOM中刪除iframe。

我很樂意更詳細地討論任何方法，但首先如何提供關於這些頁面的更多信息以及它們如何加載？

來源

2014-02-14 20:13:34

+0

我沒有使用iFrame，並且有太多的代碼發佈在這裏，你可以在這裏獲得我的完整小部件：http://www.mediafire.com/download/ae0pnug4den76cg/UniAW6.4_LS_(WidgetWeather).zip To先測試一下Config.js文件並設置var XML_TEST = true; ＆var ChangeClick = true;我知道我在這裏問很多，所以完全理解你是否沒有時間，但我認爲你會喜歡這個小部件。謝謝。 – user2253720

相關問題

 相關問題