Using https://github.com/appcelerator-modules/Ti.WKWebView I create my 'html content' on the fly using data from a JSON feed, and then pipe that into the WKWebView which works beautifully WKWebView.setHtml(myContent);
Now with a standard ti web view I have a line in the myContent variable (basically a giant string of HTML) that says <link rel="stylesheet" type="text/css" href="myfiles/style.css" /> which would style things wonderfully.
This however doesn't work on WKWebview. Upon further trial and error I see that I can't include any local files into WKWebView this way. If I set it to a remote file on a web server, then it works just fine.
But for some reason it doesn't want to pull up local files. Is this something with the design of Ti.WKWebView or am I doing something wrong?
Praying hansemannnn reads these pages as I can see no other way of creating an issue on Github
Related
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
In my website, I am only including the .css files that are generated by SASS. However, when I inspect the Network tab in Chrome I can see the browser is trying to GET the .map and .scss files as well. The .map file works, but the .scss is failing because of the file type being not allowed in my server configuration.
Are these files supposed to be loaded as well? I would expect only the CSS is needed.. these others are just used in the compilation side.
Here is my line of code
<link rel="stylesheet" type="text/css" href="/mywebapp/SASS/maas.css" />
When I exclude it, the browser GETs none of these files, but adding it causes it to GET all 3... I'm very confused about what is initializing these requests.
If this is NOT supposed to happen by default then there must be something set up in our CMS that is forcefully requesting these files.
Try to find in your CSS something like this /*# sourceMappingURL=/mywebapp/SASS/maas.css.map */
maas.css.map tries to read you .scss
You can read - http://thesassway.com/intermediate/using-source-maps-with-sass
is there any reason for something to work in page inspector and not in real debug mode?
In particular I'm using fullcalendar.min.js (JQuery plugin) in some tab content and I see it very well in page inspector but when debug the calander is not shown..
in header:
<link rel="stylesheet" href="./../../Content/fullcalendar.css" type="text/css" media="all" />
<script src="./../../Scripts/js/fullcalendar.min.js"></script>
in body:
<section class="tab events-tab">
<section class="events-tab-inner">
<div id="calendar"></div>
</section>
</section>
in console of the web page loading I have the below errors (I'm not sure they are directly related to my calendar thing):
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Based on your console output that you've included above, it seems that there are a few errors. Not sure why they would work in page inspector and not debug though. It seems like it should be breaking everywhere. Let's approach each error one by one:
1. Invalid Image Paths
It appears that you may be using jQuery UI for some features within your code. The jQuery UI suite contains images located in the /images directory when you download the .zip file that the CSS references as background-images. These images are expected to be nested on directory in from the location of the CSS file. For example,
[CSS Directory]
-> jquery-ui.min.css
[images]
-> star-off.png
-> ...
-> etc.
The only way to change this structure is to modify the relative urls within the minified jQuery UI CSS file.
2. Facebook JavaScript SDK error
I have never personally used the Facebook JavaScript SDK. However, that is what it appears you are using. From the error it sounds like you never initialize the Facebook object via FB.init() before you call FB.getLoginStatus(). Try this:
<script type="text/javascript">
/* Locate your FB.getLoginStatus() call and place FB.init() before it */
FB.init();
FB.getLoginStatus();
</script>
Other than that, you may need to refer to their documentation for how to properly initialize the FB object for use.
Hope this helps. Good luck and happy coding! :)
I am working with a legacy site that grabs some XML content via AJAX, constructs a block of HTML code with it, and then appends it to a blank div. The XML makes heavy use of Arabic text.
It seems to work fine in all browsers except Chrome. In Chrome, page loading will die at the point of appending the string to the div. When I remove the Arabic text from the XML, the page loads just fine.
The HTML being generated has the following meta tag:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
and the XML has this encoding tag:
<?xml version="1.0" encoding="UTF-8"?>
Here is a sample of the XML that is being passed:
<segment>
<content>السَّلامُ عَلَيْكُم.</content>
<linked>true</linked>
<glossWord>السَّلامُ عَلَيْكُم</glossWord>
<glossTrans>Hello. (Literally "Peace be upon you").</glossTrans>
<glossExpl>This is a very commonly used greeting. It works for any time of the the day. It can also be used to mean 'goodbye'.</glossExpl>
</segment>
Interesting tidbit, when I went to create this question in Chrome, pasting the above into the form ALSO broke Chrome, and the browser froze solid. I had to reopen and submit it in Firefox. If this is a bug in Chrome it would be nice to be able to find a way to work around it, as I don't really like the idea of telling people, "Don't use X browser" to access a site.
Had a similar issue, and it turned out to be Google Translate in Chrome on 10.6.8 having issues when I used multiple languages/characters. I got around this by adding the class "notranslate" onto html elements that I didn't want Google Translate to bomb out on.
To quickly see if this works for you, add the class "notranslate" to your body and see if the page stops hanging. Hope this works for you!
I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.