I am working on testing a VSCode extension using Extension Development Host.
After selecting the iframe, I cannot resolve the content within the iframe:
await vscode.Page.waitForSelector('iframe');
const f = await vscode.Page.$("iframe.webview.ready");
const x = await f.contentFrame();
This is coming up as null. The iframe in question is as follows:
<iframe name="31af8060-a20c-43b5-9bc4-2e0907beb675" class="webview ready" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads" allow="cross-origin-isolated; clipboard-read; clipboard-write;" src="vscode-webview://15p9bvij4mfrnhuk8i83rio1oji5609me4l6cj09abkcjtll7asl/index.html?id=e7e197b0-ad2f-4033-adc6-e0a045447be5&origin=1b8ed955-2a8f-49d8-9f39-1c1d5b80e870&swVersion=4&extensionId=hehe&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app" style="border: none; width: 100%; height: 100%; pointer-events: auto;"></iframe>
While Chrome has a argument for --disable-web-security, VSCode does not have anything of that sort. Also, I am not sure if that is the problem here. Any sugestions?
selector.contentFrame() is supposed to resolve the iframes. But when that wasn't working as expected, I found that it could be an issue regarding same origin policy in Chrome and can be bypassed by --disable-web-security.
But VSCode does not have such an option, even though it is built on the Chromium platform. Unable to find the resolution in this situation.
Related
I've spent more time on this than I care to admit but was hoping for some help in understanding the cause of the problem. I have a basic HTML web resource in Dynamics 365 (v9.1.0.9228) and in order to get the global context I must include the following:
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
https://learn.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/getglobalcontext-clientglobalcontext.js.aspx
The problem is that when I do... the Chrome debugger loses its place in the document. The execution stops at the breakpoint(s) but the current line is not highlighted this means no way to step into/over the lines or indeed know what line we are on at any given point. I can see however that the code is being executed due to my output to console (See code in footer).
I have tested this across:
Multiple D365 online instances (v9.1.0.9228)
Multiple development machines running Chrome (v77.0.3865.90)
Literally stripped back the code to very basic HTML. Interestingly, this issue does not occur in IE? The only workaround I have found is rather than having inline JS within the head tags place it a separate file instead and reference from the HTML web resource, Chrome then seems to have no issues in stopping on right line and highlighting the correct line as we debug BUT only functions within that library. If the HTML web resource has inline script the issue will still be present within that scope.
head
<script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
<script type="text/javascript">
function registerEvents() {
debugger;
console.log("in registerEvents v2.0.3");
testButton = document.getElementById("test");
testButton.onclick = test;
}
function test() {
debugger;
console.log("in Test v2.0.3");
}
</script>
body
<script type="text/javascript">
registerEvents();
</script>
<p>In chrome debugger v2.0.3</p>
<button id="test">Test</button>
I would like to understand if I am doing something wrong here as it seems to be a bug within Chrome DevTools itself given this works on all other browsers when debugging? The actual code here is almost irrelevant as the issue occurs whenever "ClientGlobalContext.js.aspx" is referenced, if we comment out that line the Chrome debugger works as expected.
My page elements should appear in all browsers as follows:
I can only achieve this in IE11 by having the dev tools open during page load, otherwise the page generates as the following:
Summary
no rounded corners on box elements
no column alignment (bootstrap class "col-lg-2" on
all label elements)
Legend formatting not added
general alignment off
no smooth accordion transition - open or closed
This issue is only with IE11, the site works in chrome, firefox and even Safari without any additional plumbing. I have found some IE fixes on SO, but so far none of them have worked:
*.html - add meta information to use Edge engine
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<html>
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->
... html continues with rest of head
*.js - to prevent undefined console from blocking processing
if(!window.console) {
console.log(item);
}
I have been sure to use Ctrl F5 when reloading the page for testing, and have also restarted devmode to see if that makes a difference. I have also confirmed that the site is not running in compatibility mode by looking in the compatability settings.
Looking through the logs I can see that when the page loads with dev tools closed, the binding is carried out using user.agent=ie8, whilst with devtools open, the binding property is user.agent=gecko1_8. I thought IE11 should always use the gecko1_8 permutation - why could this not be happening?
(using GWT Version 2.7)
Not sure if this will be of any help.
We are using GWT (2.8, but I think it also worked with 2.7 in the past).
With GWT-Bootstrap3 (https://github.com/gwtbootstrap3/gwtbootstrap3) without any problems in IE11. I am not sure you are using the same bootstrap library ?
Anyway. We added the following line in our html file (as the first line of the head tag) :
<meta http-equiv="x-ua-compatible" content="IE=10">
I can not really remember how I came up with this line, but the version history states : "It is now possible to use IE11 in compatibility mode"
So it has to do something with fixing something in IE-11, using GWT and bootstrap 3 :-)
I recently upgraded my application to GWT 2.7 from GWT 2.5. This has caused me to drop support for IE6 and IE7.
I would like to provide users with IE6 or IE7 with a warning that their browser is outdated and will not work. At the moment if you go to the app with one of those browsers, you get a blank screen.
I know there are a couple ways that I could hack something together but I would rather use the GWT way, rather than some hack. Is there a GWT hook for unsupported browsers?
Option (hack) One
Drop this into my main.html:
if(document.documentMode === 6 || document.documentMode === 7){
myUnsupportedBrowserWarningFunction();
}
Potential problem with this is that if someone is using a browser that GWT doesn't recognise and I don't recognise (mobile opera? Some other browser), they will still get a blank page.
Option (hack) Two
GWT looks for the compiled JS here:
gwt/myApp/ASDFKLSDJFLSFDJSLDFJLSJDFSDES.cache.js
When someone is using an unsupported browser the following is requested (and is not found):
gwt/myApp/undefined.cache.js
It would be possible to create undefined.cache.js and put your unsupported browser code there. This is obviously a brittle solution and will break with future GWT updates.
Option Three
A recent patch (available in GWT 2.7) allows you to provide a default
permutation (e.g. safari) if GWT can not detect the browser and with
deferred binding you can display a warning that the provided app might not
work correctly as the browser is generally unsupported by GWT.
-- J.
Source
I don't want to set a default permutation for unsupported browsers. I want the site to not work and to display a warning. So this solution doesn't really provide what I am looking for.
Similar Questions & Posts
The same question was asked for an eariler version of GWT in 2009. I hope that GWT has added some kind of hook or best practice in the last 6 years.
More info on setting a default (fallback) permutation
You should be able to use onLoadErrorFn for that: https://code.google.com/p/google-web-toolkit/issues/detail?id=8135
<script>
function gwtLoadError(errMsg) {
// GWT app couldn't load, reason in errorMsg
}
</script>
<meta name="gwt:onLoadErrorFn" content="gwtLoadError">
or possibly onPropertyErrorFn:
<script>
function gwtPropError(propName, allowedValues, actualValue) {
if (propName == 'user.agent') {
// unsupported browser
}
}
</script>
<meta name="gwt:onPropertyErrorFn" content="gwtPropError">
(I don't think user.agent.runtimeWarning would help in this case, but maybe have a look)
There is an easy way:
Conditional Comments
<!--[if lt IE 8]>
<p>You are using an unsupportet browser. Please perform an update</p>
<![endif]-->
I think Option 3 may be the best one, but there is a problem: This will start the actual application (which still may be incompatible).
If this is an issue and you want a clear warning, you can rewrite the permutation selection script (You would need to update the script with the upcoming GWT releases)
You will need to copy this source:
https://gwt.googlesource.com/gwt/+/2.7.0/user/src/com/google/gwt/useragent/rebind/UserAgentPropertyGenerator.java
You could add something like:
$wnd.Location.replace('nosupported.html');
between line 90 and 91
New at Chrome Apps. Using cca and CADT for mobile development.
In the following code, why is jQuery not immediately available? Is there some async magic being auto-applied?
I don't have this behavior in a vanilla cordova project.
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
setTimeout(function()
{
console.log($); // $ is jQuery
}, 1000);
console.log($); // $ is undefined
</script>
Our current bootstrap code will not load the html of your chrome app windows in a way you typically expect from a browser. The reasons are long, but the short story is that we have to bootstrap to set up the environment, then inject the content around the bootstrap.
One of the consequences is that scripts do not block dom content loading. I guess another consequence is that inline script execution is not delayed until preceding scripts have loaded.
We may be able to fix this bug, I'll take a look. I've filed: https://github.com/MobileChromeApps/mobile-chrome-apps/issues/482
Thanks for reporting the issue!
My facebook comment box is getting off vertically when I run my site locally with rails, but when I upload it to heroku and view it there it seems to autosize fine. Any idea why this might be? Is it because my localhost is unreachable from facebooks servers? Is there a way to get it to show properly locally?
Make sure the parent element has:
overflow: visible;
If you are using a Pluggin, you have to quit all the codes like
. facebook-comment { width: 95px !important; }
These codes are setting-up automatically by the plugin and don't work with all css functionalities.
Once you have done that, you can create a <div class> in your PHP console and adding it in your CSS file to customize your box as you want.