I have a x-ms-webview control in my WinJS App that plays a youtube video.
When I navigate away from the page, the audio from the video continues to play because (I assume) the webview hasn't been unloaded correctly.
What is the best way of removing the webview when a user navigates away from the page?
HTML: <x-ms-webview id="videoPlayer" class="videoPlayer"></x-ms-webview>
JS: videoPlayer.src = video.VideoURL;
EDIT: I've tried a horrid bodge using the navigateToString("") method in the unload event for the page. Setting this property stops the sound from playing but I hope that's not the only option available.
Here's another workaround: you can dispose of the WebView element in the PageControl's unload 'handler':
(function () {
var webView,
page = WinJS.UI.Pages.define("/pages/webView/webView.html", {
ready: function (element, something) {
webView = document.querySelector("#myWebView");
webView.src = "http://www.youtube.com/watch?v=dk5-gCc_4s4";
},
unload: function () {
webView.parentNode.removeChild(webView);
webView = null;
}
});
})();
The YouTube video will continue to play for about a minute. When you navigate back to the page with the WebView, the element will be reloaded with that PageControl. I think that your solution to use navigateToString("") is the best.
Related
My RN 0.62.2 app needs to automatically save page data just before the function component unmounts. The idea is that when the user close the page (detecting losing focus may not work here since user may zoom in image in modal screen), then the save (to backend server) is automatically triggered. Since it is function component, how to know when the component will unmount?
Here is the sample code of a function component shall do:
const MyCom = () => {
//do something here. ex, open gallery to upload image, zoon in image in `modal screen, enter input`
if (component will unmount) {
//save the data by sending them to backend server
}
}
The useEffect triggers with every rendering and will have performance issue if keep saving to backend server with each and every rendering. The auto save only happens once just before the component unmount. User may click Back or Home button to leave the page.
Yoı must use useEffect for componentWillUnmount in functional components.
const MyCom = () => {
//do something here. ex, open gallery to upload image, zoon in image in
useEffect(() => {
// Component Did Mount
return => {
// ComponentWillUnmount
}
},[])
return(/*Component*/)
}
My Vue component uses Google Forms inside an iframe. The problem is, that when user tries to navigate to another page, she will get 'Leave site? Changes that you made may not be saved.' dialog. How can I disable this in my component?
EDIT: I noticed that this caused by the fact, that one field is prefilled on the google forms. Is there a way to bypass the dialog, if there a prefilled fields?
I am spitballing here but I believe that the internal page inside the iframe sets an event handler for the window.beforeunload event, if your page does not use this event, you could
window.onbeforeunload = function () {
return undefined;
};
I found one solution. Add v-if the the iframe:
<iframe v-if=!hideGoogleForm" ...>
Then to mounted():
window.onbeforeunload = () => {
this.hideGoogleForm = true;
};
The dialog is still shortly shown but then automatically closed when the component is destroyed.
*I am using this code in my controller, inserting this controller dependency is breaking the whole code. *
$state.get('shop').onExit = function(){
modalCtrl.openModal(modalViewUrl,null);
//calling a controller which has the functions to open $modal
//handle modal submitHandler
}
1.this event will be invoked when user navigates away from the page:
$scope.$on('$locationChangeStart',function(event){
//action to be performed
event.preventDefault();
$('#modalName').modal();
});
I am developing an HTML/JS app for Windows 8.1 and am having trouble debugging a crash that is ocurring on within a handler attached to the top NavBar object when the user navigates from the page the handler is attached to.
The functionality is pretty simple: when the user lands on the screen in question, I am automatically displaying a WinJS Flyout using it's .show() method. Now, when the user invokes the top NavBar object, I have a handler that hides the Flyout object. I also have another handler that .shows() the Flyout when the NavBar is dismissed.
The problem occurs when the user navigates to another page. Here is my code for the screen in question:
var appBar = class.that.constructs.NavBar;
ready : function (element, options) {
var self = this;
...
appBar.topControl.onbeforeshow = self.hideFlyout;
appBar.topControl.onbeforehide = self.showFlyout;
$('#flyout').addClass('activated');
$('#flyout')[0].winControl._sticky = true;
$('#flyout')[0].winControl.show();
},
hideFlyout: function() {
$('#flyout').topControl.winControl.hide();
},
showFlyout: function() {
$('#flyout').topControl.winControl.show();
},
unload: function () {
appBar.topControl.onbeforeshow = null;
appBar.topControl.onaftershow = null;
}
As you can see, I am removing the event handlers upon unloading the page, but that doesn't seem to do the trick. I still get this crash error:
JavaScript runtime error: Unable to get property 'classList' of undefined or null reference
It crashes on the showFlyout handler. Does anybody have any suggestions as to how to avoid the crash upon navigating to a new page?
The show methos of the flyout wants an element as a mandatory parameter, it is the element it will be attacched to.
in your case you have to find an element and pass it to your function, for example:
var myButton= document.getElementById("myButton");
$('#flyout').topControl.winControl.show(myButton);
Check this page for a more extensive example: http://msdn.microsoft.com/en-us/library/windows/apps/br211726.aspx
is there a callback function (e.g. onComplete) for this? I would like to display a loader.
FB.XFBML.parse()
Yes, the second parameter is the callback function. For example this should work:
FB.XFBML.parse(document.getElementById('some_element'), function() {
alert('I rendered');
});
To parse the whole page by the same time
FB.XFBML.parse(document, function(){
alert('I rendered');
});
As of 2013 this does not work. Google Chrome will have "blinking" like buttons until it is finally rendered for me. This event is called before rendering is done.
To test this I try to hide the container before which has the like buttons (this works fine).
Then I test to show the container in the function() {
}); of the FB.XFBML.parse, that's when it looks like the newly loaded buttons are blinking.
Only having this issue in google chrome, but it proves that it's not after all like buttons have finished rendering in google chrome atleast.