We have a Vue.js page contains a Echarts pie draft, and we want to show it in another project, which is using jQuery.
It shows perfectly both on Chrome and IE, but on Firefox there's nothing showing.
We tried to replace the Echarts page with some basic numbers in the template, but it's still empty in Firefox.
This is what it looks like in chrome:
And this is Firefox, which only has an empty app tag:
Any help would be appreciated.
edit:
I'm using Firefox93 on 64bit, there are no errors showing in the console.
This is how we inserted the iframe:
Is the website you're trying to load the iframe in secure (https)?
I see you're trying to iframe an http url
Unlike HTTP images in an HTTPS page, which are allowed through with a little warning on the padlock, iframes are considered potentially dangerous active content and HTTP iframes won't be loaded into an HTTPS page.
Besides that the same-origin policy might have something to do with it
When it comes to several browsers is working well, and when opened in another browser it has something wrong, It should be the Web API or Browser API used by the library, in this case, VueJS.
The possible solutions from the estimated source of the problem are:
Update the VueJS to the latest version.
I hope this forum is useful: https://forum.vuejs.org/t/iframes-in-vue/102268, the questionnaire has a problem with its source link. But I think you are not experiencing this. And it is useful for anyone who visited this question.
If the problem is to be solved, I recommended using other people's custom libraries, like this: https://www.npmjs.com/package/vue-iframes. Because those libraries are developed to answer several problems that the creator facing that probably other people would be experiencing too.
Related
this is my first time asking a question through stackoverflow, while I've been a reader for years. It's the first time I really couldn't find an answer to my problem through the search function and it is probably because it's specific to my website.
I don't know when or after which modification I did, some javascript modules started behaving weird. The website would load partially the first time you visit it on chrome and then will load correctly if you refresh the browser. This won't happen on Firefox where the website will always be uncomplete. All javascript modules aren't loading correctly.
Website URL: www.levicechocolat.com
What I've tried so far:
Disabling Prestashop's Smart Caché for JavaScript features. This fixed 1 script, the navigation hover menu so I'll keep it off.
Disable CSS Smart Caché didn't fix anything, I kept it on. Same for all other prestashop optimizing features, tried one by one enabling/disabling and the only change I noticed was the above mentioned so that's the unique PS optimizing feature I kept off. I'll keep HTML compression off till I solve this issue.
Read that putting JS code at the end just before the </body> tag may fix this problem but it didn't.
I'd really appreciate if you can help me to figure this out. If you need me to post a code just let me know and I will.
Thank you very much for your help. If you live in Chile or come to Chile and you help me out I'd be glad to offer you some chocolates :).
Most probably there are some issues with the theme or some modules installed.
On Chrome it's working correctly for me and I see no Javascript errors. The wierdness is happening on Firefox, the homepage is not loading correctly and in developer console I see this javascript error: ReferenceError: writeCookie is not defined
You definetly need to debug this. What I recommend doing is moving your store on a local development machine and do the following:
Activate Prestashop's development mode: edit config/defines.inc.php at line 29 change: define('_PS_MODE_DEV_', false); to true: define('_PS_MODE_DEV_', true);
From Back Office > Advanced Parameters > Performance disable all CCC (COMBINE, COMPRESS AND CACHE) options - mainly "Move JavaScript to the end" and "Compress inline JavaScript in HTML" give errors on some themes
If it's still not working right (check for errors on Firefox and Chrome) and no other javascript errors show up try to "Disable non PrestaShop modules" from Advanced Parameters > Performance > DEBUG MODE
You can also have a look at the theme's custom javascript code maybe you can spot something there.
I hope this sheds some light on your issues.
it might be an issue with http and https.
Browsers might complain or don't load at all if resources are coming from mixed sources (secured and unsecured).
If your site is unsecured (http), try loading only resources (scripts, images) from unsecured sources.
If you cannot avoid loading resources from secured sources (https), you should consider get a SSL certificate and secure your website.
I can't get any web fonts to work in my Windows Phone 8 HTML5 Application.
I do the following:
Create a new Windows Phone HTML5 App Project
Copy my WOFF font (though I've also tried eot and ttf) to the project root, and add it to the project as an existing item
Add in this CSS to the index.html file
If anyone could create a template Windows Phone 8 project with simple working local web fonts, I'd be super appreciative. This has got me really stuck.
Windows phone supports web fonts. However, if they are embedded on the XAP they will not work.
Engineering response:
This is a known issue, the only workaround we know is to host the fonts on a remote server (making sure to bypass the single origin policy issue) and perhaps use AppCache to keep the font files locally on the device.
Thanks,
Apparently this is a known issue, and as a workaround, you need to host the fonts in a remote server until this issue is resolved by Microsoft.
I have been able to use local truetype web fonts in Windows Phone 8 HTML apps with no problems. You must ensure that the embeddable flag within the the font is set to 0 using software such as TTFEdit.
Check out the full answer I gave to a similar stackoverflow question here.
I think this might be better than the accepted answer but I'm a n00b so I can't add a comment to that yet.
I have searched and found the following post. May be it is related.
Phonegap Windows Phone 7 Dynamic HTML loading and cross-domain calls using jQuery
"If Cordova is not initialized (i.e the device ready has not fired), the browser control treats it like a remote get and lands you in to the usual Cross-Origin issue and rejects" This is probably the case for CSS. May be you can try loading CSS dynamically after deviceready event and see what happen.
NB: Same answer I posted there Phonegap/Cordova web-fonts with Windows Phone 8
I have just noticed in this video. http://channel9.msdn.com/Blogs/Interoperability/Getting-started-with-Windows-Phone-8-and-Cordova At around 4:12, it mentions the build action has to be set to "content" in order for the file to be seen. Not sure if that helps anything, since we already have a report about a bug. :p But I hope it worth sharing anyway. :)
I solved this problem using Cufon http://cufon.shoqolate.com/.
Cufon renders images instead of text, so that is the reason why this works on Windows Phone.
Here is documentation and usage: https://github.com/sorccu/cufon/wiki.
I hope this helps.
It looks like if you encode the font in base64 and put it directly in the css file, than it works in WP8 app as well.
With web apps like Icomoon or Fontsquirrel you can easily generate the css containing the base64 string.
i tried to write a script which can be added as an extension to the browser. The problem with this script is how to access the dom elements of a webpage. i used XMLHttpRequest object for accessing the web page but it has same origin policy issues. I worked on it for nearly 3 weeks finally i used Anyorigin.com code but i am not able to get all the functionality so i thought of using userscript where we can easily access the web page's DOM elements. Is ther any other way to create an extension
While enloz's answers are good, Firefox has an Add-on Builder that you can you use.
Add-ons are built using HTML, CSS and JavaScript. There is a web based version with the following features (quoting from their website):
Edit code in a feature-rich environment
Test your add-ons instantly
Use built-in version control & sharing
You can find the web based version here: https://builder.addons.mozilla.org/
Try this:
Greasemonkey:
Customize the way a web page displays or behaves, by
using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Update:
This looks to be a better solution, but I haven't tested it.
http://crossrider.com/
In my quest for knowledge I sometimes find myself scouring the source of a page only to find that the javascript method im looking for isnt on the page directly. That said I think it must be on one of the linked javascript pages. However I dont really want to have to look through each individual file to find the line. Is there a tool that can do this for me?
Preferably in firefox as an add-on I was thinking...
Cheers,
Pete
Have you checked out Firebug?
yes.. Firebug in Firefox | IE developer toolbar for IE | Developer toolbar for Firefox are great tools for indepth check of JS/CSS/HTML
We ran into a similar challenge while developing/editing our WordPress sites (i.e. not being able to search all CSS/PHP/JS files at once). As a solve, we built a plugin to allow us to do just that. If this question is related to a WordPress site, the plugin might help - rather than searching in Firebug and then having to jump back onto WordPress, you can search all and edit directly in WordPress. Plugin is called WP Backend File Search.
I am trying to build a multi-window website for my bookmarks, but I have some problems.
Here is the js version of what I am trying to build:
http://www.students.itu.edu.tr/~ozyildiri2/zpwin/zapatec
Unfortunately, there are problems with this approach. The sites in the windows are loaded through iframes, and iframes have problems (like framebreaker sites and js issues).
I want them to be XUL browsers or anything without iframe. Do you think this is possible? If so, how?
My main target is to make a website that people login and see their bookmarks like the one on the example. I don't want a firefox extension. I want something similar to www.only2clicks.com but showing the actual websites, not the thumbnails.
I am open to other approaches. Maybe flex or stuff.
Thank you all.
There is nothing you can do efficiently here. You would essentially be making a proxy if you fetch all of the data of a page then display it on your site using your server. And that can be tough on the server. Iframes are the best approach here if you want to display a working website in their place. Perhaps thumbnails are a better option.
I don't see why you would want to load a web site in a tiny iframe like that. You can't use the sites when they're that small.
Have you ever used the Opera browser? That might be a better solution to your problem - you can save sessions (groups of web pages) and you can also tile the tabs.