http://vuejs.froid.works/john
This link is perfectly working fine on chrome. But when IE11 it shows the elements.
I tried adding babel and polyfill but no success.
http://vuejs.froid.works/john/babel.html
It is single page website. Vuejs is used as cdn in script tag. I am not using any webpack.
You can check the code by viewing its source code
You can't use ES6 function syntax without back filling support for it with babel if you want to support browsers without ES6 support native. Why babel doesn't work for you is probably due to several things, but it doesn't matter.
This syntax:
mounted() {
Cannot be used if you aren't transpiling it down, so instead use:
mounted: function() {
Related
I recently updated my puppeteer version from 2.1 to 3.1. I was using pupeteer-firefox on the previous version. And now since pupeteer 3.1 has firefox built-in, I am using that. But it's only an experimental feature from pupeteer.
This code was working properly with the previous version.
const elementHandle = await page.$("iframe[src^=\"https://docs.google.com/picker\"] [id=\":7\"]")
await elementHandle.click()
Steps to reproduce
login to google: https://accounts.google.com/ServiceLogin?hl=en&gl=en
Go to: https://www.google.com/maps/d/?hl=en&gl=en
Create a new map
search for a location and add it to the map
click on the add image icon image icon
Now an iframe will open up. I need to click on the element with id=":7" inside the iframe and input image url. Can some one please help me out?
This is the official test result of puppeteer's firefox.
https://hg.mozilla.org/mozilla-central/file/tip/remote/puppeteer-expected.json
Every test against iframe is either FAIL or SKIP.
And google won't give support for firefox inside the pupeteer.
So I've come to the conclusion that it's not possible to access the iframe using pupetteer especially when cross-site scripting is banned.
I've abandoned puppeteer and started using microsoft's playwright. And everything's going good.
Please note that not Google is working on Puppeteer support in Firefox. And as you already said yourself Firefox support is in experimental stage right now. That said we are working hard to add better support for various features and APIs, but that's not a task that can be done within a week.
In regards of your question I can say that I added iframe support for a lot of APIs recently, and it's all available in Firefox 79 now.
Also note that Playwright is using a modified and unofficial Firefox build based on a recent Firefox beta.
I am learning Vue.js and am playing around with it using jsFiddle. Vue.js is natively supported by jsFiddle.
However, I can not use the Chrome Browser's vue.js dev-tools with jsFiddle, as it's not detecting it. The little "V"-icon always stays disabled, saying "vue.js not detected".
Now, the problem is, that jsFiddle renders the result in an HTML iframe, and dev-tools as is does not check any iframe for Vue.js apps, as for example, mentioned in this github issue.
I never managed to escape the iframe. Even when opening the framed content's URL in a new window, the resulting HTML page again contains an iframe.
How to use the Vue.js dev-tools with jsFiddle?
My solution to this is using the standalone dev-tools with node.js, as proposed by Geoff Baum in his comment on github.
Just install Vue Developer Tools globally:
npm install -g #vue/devtools
Then run it globally:
vue-devtools
In your fiddle, right on top, just add the proposed script URL:
<script src="http://localhost:8098"></script>
Here's a working jsFiddle, using the standard example: https://jsfiddle.net/suterma/zr2vtg84/4/
<script src="http://localhost:8098"></script>
<div id="app">
<h2>Todos:</h2>
....
</div>
Here's how it looks:
I have a component in polymer 3.0. Currently only Chrome Version 67.0.3396.99 supports is out of the box.
And Firefox 61.0.1 gives error TypeError: window.customElements is undefined .
Edge gives the following error:
SCRIPT5007: SCRIPT5007: Unable to get property
'polyfillWrapFlushCallback' of undefined or null reference
settings.js (15,14). SCRIPT5131: SCRIPT5131: Function is not a
constructor.
Polymer docs are not clear and don't have step by step guide that works without issues. Can some one provide tried and tested steps to make Polymer 3.0 components work in latest browser and also in older browsers like IE11.
Install polyfills:
npm install #webcomponents/webcomponentsjs
Then load webcomponents-loader.js to check and load any polyfills your browser needs. In your index.html, before any reference to web components add this:
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
Hope this will help someone!
I was able to get it running by adding webcomponents-loader.js like:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="./components/subscriber-modal.js" type="module"></script>
But now I need to find a way to convert ES6 WebComponent to ES5 so as to use
<script src="./node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
to run the transpiled component. But just using babel gives require not defined error. So will try to use browserify.
Note that you have to load synchronously your webcomponents-loader.js, so make sure don't use async in your (in chrome it works well with async, but ie doesn't).
At first time I encountered the same issue, and my script is below:
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>
Is there a simple way to detect if the user's browser supports neither Web Components nor the webcomponentsjs polyfill?
Thanks!
No for different reasons:
Web Components is a set a severral distinct features (Custom Elements, Shadow DOM, HTML template, HTML Imports), so some could be supported by one browser version while other not.
Polyfills themselves are using JavaScript "advanced" features that are not necessarily implemented in the broser. For example, ShadyCSS is using Array.from() that is not implemented in Internet Explorer 11 and therefore needs another polyfill to work.
Therefore, depending on what you really need, use an ad-hoc feature detection test, or try / catch test.
I use Coda 2 which has a built-in browser. Here's a code:
$('#mtbLink').click(function() {
$("#loadHere").load("file:///Volumes/Macintosh%20HD/Applications/XAMPP/xamppfiles/htdocs/another/test.html #loadThis")
});
It works in Coda browser, but doesn't work in Safari, Mozilla and Yandex.Browser (chromium-based browser). How can I fix it?
You cannot make AJAX requests to the local file system. To test this in FF/Chrome etc. you need to place your test.html file on an accessible webserver.