Android webview showing old website content instead of new - javascript

I am having an issue with webview not fetching fresh pages of my website. I did some thorough search and tried many different techniques but it didn't work till I found this code;
<link rel='stylesheet' href='style/jquery.mobile-1.3.2.min.css?ver=1.3.2'>
<script src="js/jquery-1.8.3.min.js?ver=1.8.3"></script>
<script src="js/jquery.mobile-1.3.2.min.js?ver=1.3.2"></script>
<script src="js/my_script.js?ver=201603111428"></script>
which simply says to add a new version number to my css etc whenever I make changes and it will load properly on my webview. Shockingly it worked but I have a feeling this shouldn't be the way to go about it, so I wanted to find out if there's a working script I can just add to my webview to make it load the online content each time not cached content?
Thank you for the help.

The part after ? character represents actually a log for the changes you made.
These docs should help you understand better why https://semver.org/
This is a good way and a preferred, it can be a simple hash number or an increment or a timestamp as long. But it must mark that the version the browser has cached changed. For that, we append that additional info in the name.

Related

get source code of whole website - which loads additional content after scrolling down

I want to fetch this site
https://www.film-fish.com/modern-mindless-action
to fetch the IMDB IDs of all movies listed there.
The problem is that the page loads all movies listed there just after scrolling down. So, a simple wget doesn't work.
Even if I scroll to the bottom of the page and view the source code, I do not see the last movie in the list (Hard Kill (2020)).
So the problem seems to be that the content is being created via JavaScript.
Has anybody a tip on how to achieve that?
So the problem seems to be that the content is being created via a js
script. Has anybody a tip on how to achieve that?
Indeed, executing JavaScript code is beyond scope of GNU Wget. You would need browser automation tool. If you know some Node.js or JavaScript I suggest taking look at PhantomJS Quick Start, Page Automation. Please take look at first example in 2nd link, you should be probably able to rework to your needs, i.e. instruct page to scroll down using JavaScript then extract what you need using JavaScript.

Google pagespeed shows render-blocking even moving into body part

I just checked this website with Google pagespeed Insights, they asked me change the Javascript block into body instead of head even this part has been moved already.
Anyone please help me investigate this problem if Google give me a wrong message, or how to fix the kind of issues.
https://developers.google.com/speed/pagespeed/insights/?hl=en&url=http%3A%2F%2Flogin.di.se%2F%3FappId%3Ddi.se%26lc%3Dsv&tab=mobile
The website
http://login.di.se/?appId=di.se&lc=sv
I also have another website with same DOM, however don't have this problem with google pagespeed
http://account.sydsvenskan.se/?appId=sydsvenskan.se&lc=sv
Possibility 1
Some content loads at the end of page load i.e giving an illusion that preceding JavaScripts were holding back the content rendering.
I see these two images are called in the end only for the site with issue -
http://login.di.se/public/images/di/background.jpg
http://login.di.se/public/images/di/checkbox_cust.png
You can see this here - http://tools.pingdom.com/fpt/#!/bRcsEc/http://login.di.se/?appId=di.se&lc=sv
But this is not the case for your other website - http://tools.pingdom.com/fpt/#!/cH2ghk/http://account.sydsvenskan.se/?appId=sydsvenskan.se&lc=sv
Alternate Solution - Use Asynchronous Load
Try loading the JavaScript asynchronously as google suggests something like this -
<script async src="my.js">
Refer - https://developers.google.com/speed/docs/insights/BlockingJS
There is still a huge chunk of JavaScript in your <head>
Also check to see if Cloudflare isn't inadvertently adding JavaScript where it shouldn't

How to reload part of a web page using iframe instead of ajax?

The reason I don't want to use ajax to do this is because the part I want to refresh is actually a commenting plugin implemented by other. I just put a snippet of script they provided in my html code and it shows a commenting part under my articles. As it's not a live commenting one, I want to add a refresh button next to it to enable users to just refresh the commenting part to get the latest comments without need for reloading the whole page.
Therefore, I think maybe iframe is an option for me. But the problem is I need to specify the src attribute of iframe. I don't know what value I should use because all I have is just a snippet of script. Can someone give me any idea on this?
By the way, the code snippet is as follows:
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
Just create a html page with the script you talked inside about and use this file in the iframe src attribute.
You can put the snippet above in an html file like this
<!DOCTYPE html>
<html>
<body>
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
</body>
</html>
And then use that file as the src of your iFrame, which you can refresh using javascript.
That said, just because you can do something doesn't mean you should do something. This is a really hacky way of doing what you're trying to do. A few alternative options:
Understand what the script you're using is doing, and work with it. Judging by the name of the script and div in the snippet, it may be creating an iframe to begin with. If thats the case, why not just figure out what that iFrame is called using your browsers debug it and refresh it manually, or modify the script to do so?
Use a live updating framework- This may not be possible for you, I don't know your constraints, but there are plenty of great commenting frameworks out there that do live updates. For instance Disqus comes to mind. Other examples are facebook comments or you could embed a reference to an external site like branch
Use Ajax - I'm a bit unclear on whether this is your script that you're writing, or a 3rd party script. If it is your script, then use the generally accepted methods for doing this type of work, unless you have a really great reason not too. You'll get better support from others, you'll gain more generally applicable experience, and for the most part, best practices gain that name for a reason. People use "ajax" methods for live updating pages because its effective and useful. Frames have become much less common on the web because they're clunky and make it difficult for different parts of the page to interact. If you don't have a great reason not to use the common practice, its usually your best bet.
You could do this :
var iframe = document.getElementById('your_frame_id');
iframe.src = iframe.src;
set the iframe src to its value again, this will cause the frame to refresh, and will work with cross domain frames

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container

Running JQuery or Javascript on Facebook

I am trying to execute a simple bit of jQuery or JavaScript once logged in to my Facebook account. The end goal at this moment is to click on my custom feed once the element is visible, rather than having it default to the entire Facebook friend feed.
On trying to code this using my Developer's Console in Chrome no JavaScript/jQuery seems to work at all. Even just a simple $('div'); returns null. Is it possible to run code on Facebook's page? What are they doing differently?
I guess the end goal would be to click a div if the .val('give a waffle'); but just understanding why it has not worked until now would also be interesting.
Any hints, tips or suggestions are more than welcome.
Facebook doesn't use jQuery, if you want to play with their page using jQuery commands you'll need to load it. Just copy the contents of http://code.jquery.com/jquery-1.7.1.min.js and paste it into your console first. Then proceed as usual.
Additionally you could let Google host your jQuery :
<script type="text/javascript"
src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This is more like it!
});
</script>
Many sites do this so the chances of your user already having the library cached is relatively high.

Categories

Resources