uwp javascript x-ms-webview webkitfullscreenchange event - javascript

I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen.
In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work.
Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview?
Thanks

We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.
To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
For more info, refer Interacting with web view content.
For example:
<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>
The js code:
(function (evt) {
"use strict"
var ViewManagement = Windows.UI.ViewManagement;
var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
var ApplicationView = ViewManagement.ApplicationView;
var view = ApplicationView.getForCurrentView();
var webview = document.getElementById("webview");;
webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
op.start();
});
webview.addEventListener("MSWebViewScriptNotify", function (evt) {
if (view.isFullScreen) {
view.exitFullScreenMode();
}
else {
view.tryEnterFullScreenMode();
}
});
})()

Related

Inject javascript through URL

I have an html that opens a webpage such as:
https://mywebsite.com/index.html&audio=disabled
I have a javascript function that triggers a button in the webpage:
document.querySelector('iframe').contentWindow.document.querySelector('.Pan-Button').click();
I want to trigger this via URL. Since I am anyway disabling the audio via the URL, is it possible to trigger the button as well?
Just looking for an alternate way to trigger it without calling javascript function in code.
Adding script to a URL that is executed in the other page is called Cross site scripting (XSS)) and is bad
Instead (I assume from your code you can edit the target page)
const url = new URL(document.location);
const pan = url.searchParams.get("pan");
window.addEventListener("DOMContentLoaded", () => {
if (pan && pan==="yes") {
document.querySelector('iframe').contentWindow.document.querySelector('.Pan-Button').click();
}
});
and use https://mywebsite.com/index.html?audio=disabled&pan=yes

Page load event outside InAppBrowser

I need to open an external page from my Phonegap app. I need to make it compatible with at least Android and iOS.
I have this code to open the external page
**var ref = window.open('http://mysite.com/', '_blank', 'location=no');**
lastPageLoaded = ref;
ref.addEventListener('loadstop', function (event) {
try {
alert('executing...');
var retVal = lastPageLoaded.executeScript(
{
code: "alert('got here!');"
}, function () {
});
}
catch (exception) {
alert(exception);
}
});
I also have this in my config.xml file:
<access origin="*" />
The code above invokes the InAppBrowser an correctly opens my external page. BUT, the InAppBrowser is not in fullscreen mode which is not good for my app.
I noticed that if I make a slight change to the bolded (that is, the text decorated with ** ) line above to this:
var ref = window.open('http://mysite.com/', **'_self'**, 'location=no');
than InAppBrowser is not invoked but the external page opens in full mode, as my entire app is, which is good!
However, adding the event listener won't work:
ref.addEventListener('loadstop', function (event)
I mean, my code never gets to execute this line:
code: "alert('got here!');"
Seems logical because now I am not running under InAppBrowser context, but I need one of two solutions:
1. Make InAppBrowser run in fullscreen mode and keep my existing event handler
2. Find a similar event to hook to so I can invoke the script on the loaded external page.
Is it possible to achieve this?

Accessing parent DOM/function from within an Iframe embedded in Windows 7 gadget

I have the following issue, Im creating a windows 7 gadget, which uses Iframe to load content.I have full control on the contents of the Iframe, what I want to do is, call a function in the parent (windows 7 gadget html document), from within this Iframe, or even trigger a flyout from within the Iframe, when there is hover on a link or something.
Any help is greatly appreciated.
Thanks
Although Windows Desktop Gadgets were initially said to be excluded from the restrictions of the Same Origin Policy, that is only true of XMLHttpRequests. If the <iframe> is pointing to a page on the www, then any communication between the framed page and the hosting gadget will be blocked. If this is the case then you might be able to use the method of cross-domain communication that relies on changing the hash of the topmost window. From inside the frame, you would do something like this:
window.top.location.hash = "#ShowFlyout";
Then, in the code for the gadget you'd have something like this:
window.setInterval(function () {
if (window.location.hash == "#ShowFlyout") {
window.location.hash = "";
System.Gadget.Flyout.file = "flyout.htm";
System.Gadget.Flyout.show = true;
}
}, 100);
I don't have my windows machine on hand to test it right now, but you could try it nonetheless.
If the iframe is pointing to a html document on the local machine, then you should be able to access the global System variable as a member of the topmost window object — which is the gadget — like this:
var System = window.top.System;
System.Gadget.Flyout.file = "some.htm";
System.Gadget.Flyout.show = true;
Or, also assuming you have control over the content of the flyout, you could set an event handler on all links with jQuery (since you tagged it):
$("a", iframe.contentWindow.document).click(function () {
System.Gadget.Flyout.file = this.href;
System.Gadget.Flyout.show = true;
});

Communication between firefox extension and page javascript

I am developing a web-based javascript/html application with a sister firefox-extension.
The application's page-javascript performs a few XHR calls immediately after page-load, in order to bring in and display all the content that the page requires.
Is there a way, without polling the DOM, that my extension can know that the page's initialisation procedures are complete?
Interesting question indeed..
I've just found out through this post on MozillaZine's forum an easy way to accomplish this. The technique basically consists in defining a custom DOM element within the web page, filling it with some arbitrary attributes, and then using it as the target of a custom event. The event can than be captured and used to pass values from the webpage to the extension.
Web page (assumes jquery is available)
<script type="text/javascript">
$(document).ready(function(){
$.get("http://mywebsite.net/ajax.php",function(data){
//[...]process data
//define a custom element and append it to the document
var element = document.createElement("MyExtensionDataElement");
element.setAttribute("application_state", "ready");
document.documentElement.appendChild(element);
//create a custom event and dispatch it
// using the custom element as its target
var ev = document.createEvent("Events");
ev.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(ev);
});
});
</script>
Chrome code:
function myListener(e) {
alert("data:" + e.target.getAttribute("application_state"));
}
function on_specialpage_load(event) {
if (event.originalTarget instanceof HTMLDocument &&
event.originalTarget.location.href == "http://mywebsite.net/myspecialpage.html") {
var doc=event.originalTarget;
doc.addEventListener("MyExtensionEvent", myListener, false, true);
}
}
gBrowser.addEventListener("DOMContentLoaded",on_specialpage_load,false);
Notice that doc.addEventListener has a fourth parameter, indicating that it will accept events coming from untrusted code. However you can add this event listener selectively, so that only trusted pages from your site will be able to pass values to the extension.
You could hook into the XMLHttpRequest object from your extension and monitor the requests, similar to what this GreaseMonkey script does (description). Add a wrapper to onreadystatechange in the same way he's added a wrapper to open which notifies the extension when complete. Probably also want some code which makes sure you're only doing this when visiting your own page.
Firebug does similar stuff for its Net panel, the codebase for that is a bit more intimidating though :) I also had a look at the Firebug Lite watchXHR function, but that code is a bit too cunning for me, if you can work it out let me know.

In XUL, how do I know a browser-tag has finished loading?

I'm developing a firefox extension based on this tutorial which is a FF 2.0 extension (second part of the tutorial is at this url)
The main thing that is important is that it uses
<iframe id="contentview" src="http://www.ibm.com/developerworks/web" flex="2"/>
In the backend code, when clicking the GO button, this happens:
contentview.contentDocument.location.href = urlbox.value;
//Use Firefox XPath to get the raw text of the document
var doctext = contentview.contentDocument.evaluate(
"string(.)", document, null, XPathResult.STRING_TYPE, null).stringValue;
I get an error with the xpath, but that's not my question. The issue I have with FF 3.0 is that the contentDocument value refers to the old site loaded, not to the one loaded by the href-change.
So my question is: how can I create a similar window, but be notified someone when the loaded document is complete, so I can access its DOM?
Updated:
first you need to handle the load event of the window then you add an event listener to the iframe element
window.addEventListener("load",Listen,false);
function Listen()
{
var frame = document.getElementById("contentview");
frame.addEventListener("DOMContentLoaded", DomLoadedEventHandler, true);
}
function DomLoadedEventHandler() {
var frame = document.getElementById("contentview");
alert(frame.contentDocument.location.href);
}
replace "DomLoadedEventHandler" with your event handler name.
I recommend that you take a look at the official site of Mozilla to learn everything about Firefox extensions
http://developer.mozilla.com

Categories