I want to load a CDN version of foundation.min.js with a local fallback. The question is: How can I detect if foundation.js is loaded?
I saw it done done with jQuery, modernizr, Bootstrap ... but I can't find the code for Foundation.
It should look like this except the part "window.Foundation":
<!-- jsDelivr CDN -->
<script src="//cdn.jsdelivr.net/foundation/4.3.1/js/foundation.min.js"></script>
<!-- Fallback to local -->
<script>window.Foundation || document.write('<script src="/js/vendor/foundation.min.js"><\/script>')</script>
Ok, it turned out that my original code was actually correct. Foundation is actual JavaScript object and I had a typo somewhere else. So, to sum up ... you can load foundation.min.js from CDN with a local fallback like this:
<!-- jsDelivr CDN -->
<script src="//cdn.jsdelivr.net/foundation/4.3.1/js/foundation.min.js"></script>
<!-- Fallback to local -->
<script>window.Foundation || document.write('<script src="/js/vendor/foundation.min.js"><\/script>')</script>
If anyone is interested I've created the gist with CDN/local fallback for all Foundation required files:
gist.github.com/kevinwake/6208601
RequireJS might be one option for you.
From sections 4.6.2 and 4.6.3 at http://requirejs.org/docs/api.html#pathsfallbacks
requirejs.config({
//To get timely, correct error triggers in IE, force a define/shim exports check.
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//If the CDN location fails, load from this location
'lib/jquery'
]
}
});
//Later
require(['jquery'], function ($) {
});
This above code will try the CDN location, but if that fails, fall back to the local lib/jquery.js location.
Good luck!
Related
I'm working with ABP IO 4.4.4 and I want to change the default swagger URL by adding a prefix
Eg :
swagger/index.html -> mynewsite/swagger/index.html
I tried the changes mentioned in the post
How do I change the Swagger default URL and use a custom one?
But the swagger documentation and swagger-ui does not seem to load. When I use inspect element in the browser it shows that abp.js is not found (404) and the console log show the same. Any idea on what could be done to make this change. Thanks.
app.UseSwagger(o => {
options.RouteTemplate = "foobar/swagger/{documentName}/swagger.json";
});
app.UseAbpSwaggerUI(options => {
options.RoutePrefix = "foobar";
options.SwaggerEndpoint("/foobar/swagger/v1/swagger.json", "Support APP API");
options.InjectJavascript("/swagger/ui/abp.js");
options.InjectJavascript("/swagger/ui/abp.swagger.js");
});
Whats done here is the the js file abp and abp.swagger.js are loaded again in a relative path. If you chack the Volo.Abp.Swashbuckle wrapper a similar configuration could be found.
I'm trying to move a very old 2.x ember-electron application to new electron with ember-electron and got application window with blank screen and error in console:
(node:9061) electron: Failed to load URL: serve://dist/ with error: ERR_FILE_NOT_FOUND
The calling file ../new-ember-electron/electron-app/src/index.js has lines from old applications:
const emberAppLocation = 'serve://dist';
mainWindow.loadURL(emberAppLocation);
File ../new-ember-electron/app/router.js has:
this.route('index', { path: '/' }, function() {}
Files ../new-ember-electron/app/routes/index.js, ../new-ember-electron/app/controllers/index.js and ../new-ember-electron/app/templates/index.hbs also exist.
So, it's unclear what exactly is not found and how to find a more detailed error (application developer console doesn't have errors). But if to change the mentioned 2 lines in ../new-ember-electron/electron-app/src/index.js to:
const emberAppLocation = '../app/index.html';
mainWindow.loadFile(emberAppLocation);
then application shows content of the correct file, despite nothing working in it, even <LinkTo>...</LinkTo> is not treated as a link.
Would you please help me to understand how an ember-electron application should be structured and which way is called for the recent versions?
Used versions: node - 16.14.0, electron: 17.0.1, ember-cli: 3.28.5, ember-electron: 3.1.0, OS: darwin x64.
Thank you.
Thank you, jacobq, I've looked at your example and used emberAppUrl to start from ember-dist/index.html file. After few more changes related to require/requireNode (fixed with webPreferences options in mainWindow) the app rendered index.html file. But a problem with app location happens again right on {{ content-for "body" }} in index.html: "Uncaught Error: Cannot find module 'app-name/app'" where app-name is the application name set up as 'name' in /package.json and as 'modulePrefix' in config/environment.js. The error itself comes from /node-modules/ember-cli/lib/utilities/ember-app-utils.js, 'contentFor' function called with 'app-boot'. The ember-cli itself constructs the /app-name/app path. So, the question now is what exactly ember-cli expects to find during the boot with the new structure? Or maybe some config variable should be added to let know Ember about the /app-name/app location?
Edited:
jacobq, yes, the only difference in index.html is application name: "testapp". RootURL is set in ../testapp/config/environment.js:
podModulePrefix: 'testapp/pods',
environment,
modulePrefix: 'testapp',
rootURL: process.env.EMBER_CLI_ELECTRON ? '' : '/',
locationType: process.env.EMBER_CLI_ELECTRON ? 'hash' : 'auto',
The full error:
It happens when testapp.js file is called from index.html, on code included from ember-cli:
if (!runningTests) {
require("testapp/app")["default"].create({"LOG_TRANSITIONS":true,"LOG_TRANSITIONS_INTERNAL":true});
}
First thing I'd like to plug is joining the #topic-desktop channel on the Ember.js community Discord server: https://discord.com/channels/480462759797063690/488735754139336714
(it's often easier to work things out by chatting there as there's lower latency than typically found with forum post/reply platforms)
Secondly, there are lots of breaking (but good) changes between ember-electron 2.x and 3.x, so I'd encourage you to work through the upgrade guide here: https://ember-electron.js.org/docs/guides/upgrading
That said, I suspect that the problem you're seeing is related to the change from serve:// to file://. Have a look at the demo app I just spun up here:
https://github.com/jacobq/ember-electron-demo
You can see the new emberAppURL here:
https://github.com/jacobq/ember-electron-demo/blob/cf7c5dee2cd975f8c67ed1dfc61eb717461f5b7d/electron-app/src/index.js#L13
Basically, ember-electron v3.x puts the usual dist output from ember build into <project_root>/electron-app/ember-dist/ now.
FWIW, I'm actually stuck on 3.0.0-beta.2 in my application because I am using IndexedDB and don't have migration code to deal with origin-related issues of switching to file:// scheme. I don't recommend that you use that version, but you could try it if you wanted to see if that changes the error you're encountering (because that beta still uses electron-protocol-serve).
I am writing a test suite using Capybara/Poltergeist combo for a website and I am coming across a situation where the DOM doesn't seem to be loading whatever I try to do.
I can see from the website snapshot that only the footer and the header are there, but not the main components of the page.
for example a page such as: https://www.udemy.com/courses/business/finance/all-courses/?lang=en&ordering=newest
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, js_errors: false, debug: false, # change this to true to troubleshoot
window_size: [1300, 1000] # this can affect dynamic layout
)
end
browser=Capybara.current_session
browser.visit "https://www.udemy.com/courses/business/finance/all-courses/?lang=en&ordering=newest"
sleep 15 ##giving it time to load
browser.save_screenshot('app/file1.png', full: true)
only the header and footer show up.
I suppose it is due to the fact that some DOM elements are loaded asynchronously, and on my current website I have the same problem.
Stuck here for 2 days now, any suggestions as to how to get the page to load properly? Thanks
You most likely need to update phantomjs to 2.0+. PhantomJS 1.9.8 which I'm guessing you're using is roughly equivalent to Safari 5 iirc and doesn't appear to work with the udemy site.
I'm using the QT WebEngine framework to display web pages. I'm injecting javascript into a page when it loads, and want to allow the javascript to be able to access a QT object. Apparently, to do this a QWebChannel must exist that establishes some IPC between chromium (the javascript) and the rest of my C++/QT project. I came across the QWebEnginePage::setWebChannel (QWebChannel *channel) function, however I can't find any examples of its use. The documentation (http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel) mentions that qt.webChannelTransport should be available in the javascript context, but I don't see where that is established in qwebchannel.js (https://github.com/qtproject/qtwebchannel/blob/dev/src/webchannel/qwebchannel.js). I've seen the WebChannel examples (http://doc.qt.io/qt-5/qtwebchannel-examples.html) and would like to avoid WebSockets if possible.
Below is how I tried to implement the web channel.
Whenever a page loads I establish a channel and inject the javascript in C++:
QWebChannel *channel = new QWebChannel();
channel->registerObject(QStringLiteral("jshelper"), helper);
view->page()->runJavaScript(qwebjs); //this is qwebchannel.js
view->page()->setWebChannel(channel);
view->page()->runJavaScript(myfunction); //function that calls QT object (jshelper)
In Javascript:
new QWebChannel(qt.webChannelTransport, function(channel) { ... });
Which results in the channel not being connected properly (assuming this is because of qt.webChannelTransport, as it was working when I was using WebSockets). Any pointers to examples of QWebChannel being set up with QWebEnginePage this way is also appreciated.
Short answer: add <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> to your html page (before you call new QWebChannel of course), and remove the line view->page()->runJavaScript(qwebjs); //this is qwebchannel.js from your C++ code.
Long answer:
I too had a ton of trouble figuring out how to use QWebChannel without WebSockets correctly -- managed to get it working after digging around in Qt 5.5 source code and mailing lists (documentation is still lacking). Note that this only works with the new Qt 5.5.
Here's how to use QWebChannel:
// file: MyWebEngineView.cpp, MyWebEngineView extends QWebEngineView
QWebChannel *channel = new QWebChannel(page());
// set the web channel to be used by the page
// see http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel
page()->setWebChannel(channel);
// register QObjects to be exposed to JavaScript
channel->registerObject(QStringLiteral("jshelper"), helper);
// now you can call page()->runJavaScript(...) etc
// you DON'T need to call runJavaScript with qwebchannel.js, see the html file below
// load your page
load(url);
And on the JS side:
<!-- NOTE: this is what you're missing -->
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript">
<!-- it's a good idea to initialize webchannel after DOM ready, if your code is going to manipulate the DOM -->
document.addEventListener("DOMContentLoaded", function () {
new QWebChannel(qt.webChannelTransport, function (channel) {
var jshelper = channel.objects.jshelper;
// do what you gotta do
});
});
</script>
Also make sure you've added QT += webenginewidgets webchannel to your .pro file else this won't build!
Bonus: you can debug your JavaScript from the comfort of Chrome Dev Tools now! Just add this somewhere in your Qt code (ideally in your application startup):
#ifdef QT_DEBUG
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "23654");
#endif
Then start your application, navigate to http://localhost:23654 in Chrome, and you'll get a fully-functional JS debugger, profiler, console, etc :)
Follow-up (19/04/2016): if your remote debugger isn't working, note that the qputenv call must also occur before any calls to QWebEngineSettings or any other WebEngine-related class, because these trigger the WebEngine "zygote" process immediately (the zygote is the parent QtWebEngineProcess from which all future QtWebEngineProcesses are forked) and then qputenv cannot affect it. Spent a few hours tracking this down.
I am using Awesomium with C++ and I'd like to load local pages with AJAX.
Awesomium is running on the chrome engine as far as I know, and chrome has disabled loading local files through ajax calls.
However this can be enabled setting this flag in awesomium config:
WebConfig wc = WebConfig();
wc.additional_options.Push(Awesomium::ToWebString("--allow-file-access-from-files"));
web_core_ = WebCore::Initialize(wc);
I think this is correct?
Source: https://code.google.com/p/chromium/issues/detail?id=40787&q=ajax%20local&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Anyway, my AJAX doesn't succeed, it fails and the page does not load.
the ajax:
$.ajax({
type: "GET",
url: u,
context: document.body,
dataType: "html"
}).success(function() {
test("yes");
}).error(function() {
test("no");
});
// prints "no" when the function is called.
Could anyone please point me in the right direction?
I think it should be possible, I've seen others on this site claiming to be using awesomium and ajax calls.
Best regards.