I have a code snippet that is installed on third party websites. I can't get into the details, but it loads HTML, CSS and JS onto the page through the use of a <script> tag.
Part of the code is a JS function that executes when this link is clicked:
?
If there are JS errors on the page that prevent the function from executing, clicking the link obviously just adds the hash to the URL and takes the user to the top of the page. This is the expected fallback behavior.
However, on one third party site with a multitude of JS errors, clicking the link removes everything after the top level domain, adds the hash, and directs to that page (the home page). For example, the link would take the user from:
http://www.example.com/2010/05/14/very-interesting-blog-post/
to
http://www.example.com/#
Notably, the issue occurs in Firefox and Chrome, but not IE9. I know it may be impossible to properly diagnose the issue without more detailed code, but I'm not at liberty to provide it. I'm just hoping to get some kind of reasonable explanation for this strange browser behavior.
If it helps at all, the site in question is a WordPress blog. Thanks in advance.
EDIT: This is apparently not caused by any JS on the site, because turning off JS and adding the link with the inspector produced the same behavior.
I had a similar error where clicking on any <a href="#"> causes a full page reload. I managed to solve this by removing the <base href="/"> tag from the <head> of the page. I couldn't find any informations on this (yet). I'll add more if I can find any additional info.
This problem happens when you use windows.onpopstate to handle back or forward buttons and load page using ajax. Try to solve your js code for handling history.
Related
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
First: I know you should not use href javascript: to put javascript o a link. It is bad practise and all I can find on the forums is don't use it and questions regarding this are rejected. But I am not generating the html. It is salesforce who is generating html and I suppose they don't know better.
Now this is not working in Firefox and IE. Only in chrome. The strange thing is that if I try to write the same href in a test html page all 3 browsers seem to happily execute the javascript following the javascript: so it is not that is not supported by all browsers.
However with the visual force page embedded in the lightning interface such links no longer work. So I was wondering if there is anything I could investigate or do to get these working so any general information about why such links would not work or more specific why salesforce would be doing this for VF pages in the lightning interface could help me.
Such links are generated with the
<apex:outputLink target="_top" value="{!UpdateLink}">/apex:outputLink>
and to check that such links do not work when embedded in the lightning page I inserted the following snippet of html both in my VF page and in a blank html page
<script type="text/javascript">
function DebugClick ()
{
alert ('click');
return false;
}
</script>
debugger
In the html page it works in all three browsers. In the VF page it only works in chrome.
I also forced a break in the code and inspected the code using javascript to see if either the href attribute or the onclick of the link were changed but they seem intact. Here is my console output copy where I inspected the actual link not working, not my test link
window.getElementByIdCS('j_id0:j_id1:j_id2:updatelinkpnl').childNodes [0].onclick
null
window.getElementByIdCS('j_id0:j_id1:j_id2:updatelinkpnl').childNodes [0].attributes ['href']
href="javascript:srcUp('https%3A%2F%2Fbvdep.na5.visual.force.com%2Fapex%2FBvDAccountLink%3Faction%3DUpdate%26id%3D0017000001THUbxAAH%26objType%3DAccount%26product%3Dorbisneo%26isdtp%3Dp1');"
I finally cracked it (and see more or less where it is coming from) so here is for anyone encountering a similar issue what seem to be the key factors.
The is in an iframe. And the target is _top. I know this is a strange combinbination, but the original url was a simple link that needed the top target. It is only the lightning interface that substituted this to use javascript but doesn't remove the top.
Apparently IE and firefox then refuse to execute it. It might be that some security policy headers are part of the equation, but since I found a solution (make the target=_top dependant on the inteface I had no need to search further
This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!
I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.
I’m trying to make web scraping in a web page, but there is code that I can’t reach. The part of the code of the page that I cannot achieve is accessed through an anchor tag. In the html is:
<a class="MTLink" href="#d192633539-47" title="example" >
But when I click on "#d192633539-47" does not appear what is intended, ie not appear that appears when I click on the link on the page. Instead appears another page.
Related to this I have also
<li id="d192633539-47" class="MainTabContent Hidden" tnIndex="192633539">
Someone can help me? What could be happening?
This element is controlled by JavaScript. Without tracing the JS code you cannot determine the intention of the click event.
There might be a problem with wrong cookie handling. Check it out.