Using this simple code I expected 1,2,3 to open a pdf at page 1 page 2 and page 404
The raw html (in snippet below) works perfectly in Firefox in any order page 1 is replaced by page 2 etc.
In Edge (possibly Chrome/ium) I need to go 1, 3, 2, for page 2 to appear, so presume its some cache problem/setting?
Is it local to my settings?
or is it a common issue (have seen something similar with external address, on occasions)
see my prior answer to another question https://stackoverflow.com/a/73986937/10802527
NOTE I have the PDF setting Open PDFs to last viewed location when you reopen files OFF
I do not wish to add JavaScript but will consider in page css or browser user choices.
<body>
Click the links (1 2 3). <br/>
OR regular view, pop-up test<br/>
1<br/>
2<br/>
3<br/>
<iframe name="if" width="400" height="400"></iframe>
</body>
I have trawled though dozens of change this or that cache setting even off in inspector, plus those in IExplorer and lots of in page css options but none seem to work other than change the perceived address.
So, this works to force a fresh re-download?, but can't find any better.
1a<br/>
2b<br/>
I test in Chrome and it has the same behavior as Edge. I think it's a chromium issue. It looks like cache problem in iframe and there's no setting in browser can fix this.
As a workaround, you can add a unique query string parameter after the pdf url like this: https://africau.edu/images/default/sample.pdf?v=22222#page=2. Then the browser will cache each pdf version separately. You can refer to the following code:
<body>
Click the links (1 2 3). <br />
OR regular view, pop-up test<br />
1<br />
2<br />
3<br />
<iframe name="if" width="400" height="400"></iframe>
</body>
Related
I want to manipulate a youtube video to autoplay and loop using js/jquery. It seems my issues stem from the from the fact that my site is on a CMS (Drupal), and it already spits out the iframe. So it's not an empty div that gets replaced as per the documentation.
The first thing I did was to change some settings on my site to ensure that "enablejsapi=1" and an ID was included in the output for whatever spits out the iframe.
I thought that would suffice and I'd only need to reference that ID in the onYouTubeIframeAPIReady(); function. But it wasn't working.
I looked at these solutions as well:
Listening for Youtube Event with this http://jsfiddle.net/YzvXa/197 - It didn't quite work for me. The state change did seem to be working in the fiddle, but when I tried to add parameters it didn't. (I'm assuming parameters only work when applied on load/ready?)
Already embedded iframe not working with api with this http://jsfiddle.net/y89je0k8/ - I feel like this got me closer, as I was able to atleast autoplay and mute using event.target.playVideo().mute(); for the ready event. How ever setting parameters like controls: 0 etc didn't.
What confuses me is in the second solution, it only works when the js is "inline". In the fiddle it's actually written in the html box in a script tag, but if you move the script in the js box, it doesn't.
Still I do feel like the points stated in the second solution might point me in the right direction, but I'm stuck in how to move forward with it.
onPlayerReady will not fire the ready check on localhost.
Also when linking your youtube.js file it has to come after the iframe.
add ?enablejsapi=1
sometimes double linking in both player_api and iframe_api will also help
//< before www. not https://
placment is key.
Here's what I've tried:
I've addressed #1 by actually adding my js in the server
My script is linked just before the closing body tag (so it is after the iframe)
I have adjusted my cms' youtube handler (Media: Youtube for Drupal) to add this parameter on output
I have tried this but it didn't seem to make a difference
I am limited by this as I am bound to using https. Is this the deal breaker?
I do notice that when I add the standard code to load the the iframe api asynchronously in my js, the <script src="https://www.youtube.com/iframe_api"></script> and <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflC6bXIS/www-widgetapi.js" async=""></script> appears as the first items in <head>, instead of just directly after the iframe as it normally would. I'm unsure why this is happening, but what can I do to ensure it's in the correct place? Perhaps this is the source of the issue, if placement is the key?
What I want to achieve is this behaviour: https://codepen.io/cee-r/pen/PMaRJR, where the video accepts parameters set in js when the html markup is already:
<iframe id="player" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/ApXoWvfEYVU?enablejsapi=1" frameborder="0" allowfullscreen="1" ></iframe>
instead of:
<div id="player"></div>
I am having trouble with only firefox. My page shows a tree structure that is loaded via ajax as the user clicks on the nodes they want to expand. The problem I'm having with firefox, and only firefox, is that it will expand the nodes on the first page load. But after that firefox caches it weird and the node header, not children, of the ajax request gets carried over to the new page. This is an issue because the node's header that is carried over contains information that determines if the node has retrieved it's children.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="1"/>
...
</div>
It should be as it is on the first page load.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="0"/>
...
</div>
My Javascript checks for a nonzero value on that input to do the AJAX call.
Is this a bfcache issue?
I'm lead to believe it's not because I added
window.onunload = function();
to the js file and in a script tag and neither fixed it which this article
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
says should invalidate the bfcache.
I'm using asp.net MVC 4 and I tried using the MVCdonutcaching to set this page and partial views to not cache. But that didn't work either.
Maybe it's the bfcache, maybe it's not.
I had to face the same problem some time ago. The browser caches were causing some strange behaviour on our forms, and it was affecting the expected results of the page.
Someway to solve itSomething you can do in order to make the program load always the correct value (assuming you are loading it from ) is to initialize the value through your Javascript.
If you use JQuery, you should use:
<script type="text/javascript">
$(document).ready(){
//Assign your items values here
}
<script>
You can also use the onload handler in JS.
Hope this helps.
I was able to solve the problem. Firefox caches all form data even hidden inputs. Since I was using a hidden field to store the flag that enabled the AJAX request it would reload the form data with the flag set. I moved it to a custom attribute and it works exactly as it should.
I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?
Is there a way to get struts 2 (using tiles) to build the whole page before sending it to the browser? I don't want the page to be build "progressively" in the browser one part at a time.
The main problem I'm trying to solve is that internet explorer 7 flashes/blinks the page even if only some of the content changes (firefox does this much more smoothly).
So that if I have a page with:
HEADER
some content
FOOTER
And the "some content" area only changes between page loads, the FOOTER part still flashes the white background before filling it with the background color of the footer. I tought that maybe by getting struts to send the complete page it would load fast enough to eliminate the "blinking".
Now the FOOTER comes from the server a little bit later than the parts before it and so it flashes (in internet explorer, firefox displays the page smoothly).
NB: this is an important requirement for the site, and using ajax to load the middle content is out (as are frames or other "hacks"). The site is built using CSS and not a table layout, maybe I will have to use a table layout to get it to work...
About using tiles flush parameter:
I tried that and it doesn't work as I need. I would need a flush-parameter for the whole page. I have tried the normal jsp page directive "autoFlush=false" but it didn't work. I set this directive on my main template page (and not in the tiles).
Here is an example from the main template, which uses header, body and footer templates. With the Thread.sleep() I added the problem is easy to spot. The footer renders 2 secs later than the rest of the page.
<body>
<div id="container">
<t:insertAttribute name="header" flush="false" />
<div id="content"><t:insertAttribute name="body" flush="false"/></div>
<div class="clear"></div>
<% Thread.sleep(2000); %>
<t:insertAttribute name="footer" flush="false" />
</div>
</body>
UPDATE
Thanks for the comments. The requirement is actually almost reasonable as this isn't a normal web page, think embedded.
But apparently there is no way of configuring IE to start rendering after some delay (like firefox has a configurable delay of some 100ms)?
I tried to intercept the TilesResult but the method doExecute is run before the whole content is apparently evaluated, so the method has already exited before the jsp is evaluated (my Thread.sleep() test). I was wondering how I could render the whole response to a string and then output that all at once to the browser.
I know that this isn't foolproof and network delays etc may factor in this, but if I could get the response to output all at once and maybe use a table based layout (IE possibly renders the table only after the table closes) this could work reasonably.
Or then try to get this switched to firefox or maybe forget all about this little glitch...
UPDATE 2
This started to bother me so I did some investigation.
If I had a plain jsp page (no tiles) the buffering works (with the buffer attribute), so that if I had my Thread.sleep() there the whole page rendered after two seconds if the page size was below the buffer size.
But if I used tiles in the page (as in the example above) I couldn't get the page to render at the same time (I even included the page directive in all my tiles-templates/"components", no help). So tiles probably flushes the response somewhere?
Furthermore, the "problematic tiles" was my body-part, which contained a struts:form tag. I replaced it with a normal form-tag and it worked as I wanted...
UPDATE 3
Ok, nobody seems to know the inner workings of tiles or struts tags...
No big problem as this is a very specific case and requirement.
I worked around it by using apache as a proxt in front of the application, and using apache's proxy configuration options to specify a large buffer.
I'll mark this as answered.
You can send page data all at once at the server end if you like (and many frameworks do that anyway for convenience) but the reality of networking is that it won't all arrive at once and the browser will render it as packets arrive. And this is a good thing for responsiveness, even if you* aesthetically would like the page to display all at once.
You can reduce the lag as much as possible by simplifying markup and using deflate compression to keep the payload size down, and that's a worthwhile thing to do in general. Plus you can make sure you're not hitting a Flash Of Unstyled Content. But you can't control when the browser chooses to render, short of doing it all in JavaScript with all the downsides that entails (and even then, the browser might redraw slowly).
(* - or your client/boss, if that's who has come up with this "important requirement" that your site somehow work differently to every other page on the web.)
Can you use the "flush" attribute on the tiles components?
<tiles:insertAttribute name="body" flush="false"/>
In addition if the output buffer gets too big, it will flush anyway. Try increasing the buffer size?
<%# page language="java" buffer="500kb" autoFlush="false" %>