I have an intranet site with two hidden iframes that are made visibile once a user clicks on the corresponding nav menu option on the parent page. Both of these iframes point to pages I have created and contain code for page hits. I used lazy loading for each of these, and that prevented the iframe from incrementing their respective page hits until the page/iframe was actually made visible; but running Edge in IE Mode has now nullified that. Loading the site now increments all page hits regardless if the iframes are visible or not.
I've searched all over for any tips or tricks to get this working in IE Mode, but I haven't found anything yet. This all works perfectly in Chrome and Edge, but my company is running Edge with IE Mode; so here I am.... in search of answers. Thank you in advance!
Related
I am working on an enterprise application developed on MVC, JQuery and while moving between pages , we are regularly seeing a blank screen i.e. the HTML takes time to render however, the same is not seen on Chrome browser.
on heavy pages, the blank screen appears for 4-5 seconds and then the actual pages comes up. Again, the same behavior is not seen on chrome, even these heavy pages are loaded quickly without an intermittent display of blank screen
Please let me know if there is a setting in IE or in code that should be included to ensure quicker rendering of HTML on IE.
Thanks in Advance... !
Blow tips might help you
validate pages with W3C standards.
Check any closing tag is missing.
Optimize the content if its to heavy to load, in chrome go to network select "all" option and reload page check loading time.
add preloader image remove it on window onload() method.
Try to load site contents in the background for better performance in Internet Explorer.
You can follow steps below to enable that option in Internet Explorer.
(1) Go to Tools in Internet Explorer.
(2) Click on Internet Options.
(3) Select Advanced tab.
(4) Find an option called Load sites and content in the background to optimize performance and checked it.
Again try to make a test with your site in Internet Explorer 11.
if still issue persist than you may need to check your site and try to take some steps to make it lightweight to improve its performance in IE 11.
While trying to tweak some scrolling script to perform "jump to" links on some pages, I noticed that if you have a page with contains a hash tag in the URL, the behavior is different depending on the browsers when you press enter on the address bar, after the page is loaded.
For example, if you load a page with an has in the URL and then scroll away from the target element, I noticed that on Firefox and IE, if you put your cursor on the address bar and press enter, the page will move back to the HTML element having the same id attribute as the hashtag but the page will not be reloaded.
I also noticed that neither popstate nor hashchange events are triggered in such scenario. The scroll event will most likely be triggered but how can we know this is not the user scrolling but the browser reseting back its position?
Is there any was to detect this type of event in the browsers? Given this is outside the viewport I'm a bit curious. But I have a scenario where I would like to reposition the menu depending is the page is scrolling up or down.
To try to explain what I'm looking for:
Page with hashtag #test and element <div id="test">
Press F5, the page posisition itself right where the <div> is
Scroll up or down
Go on the address bar and press enter
---- Looking for an event to detect the previous action ---
the page posisition itself
right where the <div> is
Example in JSBin (open in Firefox):
http://jsbin.com/rifikereze/1/edit?html,js,output
Output:
http://output.jsbin.com/rifikereze/1#test2
Open your console in Firefox
Make sure in the Firefox setting you enable "persistent logs" to keep logs after page reloads
Press F5 (you should see a console message "reloaded")
Now try to move the page, put your cursor in the address bar and press enter
You will see the page does not reload
How can we detect these events (other than scroll events)?
Make sure to use Firefox on Windows if trying to reproduce. It looks like other OSes have other behaviors.
Given the lack of answer, my presumed answer is No.
There is no way to detect re-positioning of browsers using fragment identifiers (aka hash) in URLs and the address bar.
On top of this, browsers seems to have inconsistent behaviors:
Firefox on Linux behave differently than on Windows (it reloads the page).
Chrome seems to be ignoring re-positioning unless the page's position is set back to the top position before unloading.
There seems to be no standard across browsers on whether the normal behavior is to reload or re-position.
The only safe way to detect fragment identifiers repositioning is when loading the page.
Using Service Manager, Cireson and the web portal for the front end.
Opening the web portal in Internet Explorer 11, two divs are hidden and do not appear on the page until you click anywhere on the page.
This problem does not occur in Chrome.
IE loads the data, and I can inspect the elements in the dev tab, it just doesn't show.
Does anyone have any idea what may be causing this? Because the web portal is build dynamically, I am struggling to locate it.
I assume it would be something to do with the CSS?
Without seeing your code, it is difficult to say. However, as you presumed, it is likely a feature in your CSS is not supported by internet explorer, preventing it from displaying on Page Load.
I have a strange issue with Internet Explorer [sic!].
When navigating through my pages, the back-button alwasy shows «processing» as the last entry - and after that the pages I really accessed. I always have to click the back-button twice (at least) to make the browser access the last visited page.
The pages have some jQuery in it as well as a linked in follow-button (that sometimes shows < > instead of the button when I click the back-button).
The linkedIn-Button is added via Javascript and resides in an iFrame - and I read some posts that iFrames can break IE's back-button. Alas, when I remove the linkedIn-Button, the problem persists...
I might also add, that the page is called with https (which might cause other problems in IE?)
Any ideas???
What's the Problem:
Unfortunately I must use an Iframe in a web solution (tenant scoped SharePoint hosted App with App Parts).
The iframe needs around 50% of the website's space and the space for it in the host will be programmatically blown up in size so that there will be no scrolling bars shown. It works good on every browser except Safari. In Safari the touch event seems to be caught by the iframe window and will not be forwarded to the host window. Imagine this on the iPad: in over 50% of the page the user can't scroll down the page.
Hardware I used for testing:
Windows 8.1 (touch enabled screen) with latest version of Safari (5.1.7)
iPad with iOS version 8.4.1.
What I researched/tried so far:
This has nothing to do with everything that can be solved by "-webkit-overflow-scrolling: touch;" and similar approaches. From what I understood in my research, this will make the iframe scrollable but I need to make the host window scrollable when moving the finger in the iframe area. In other Browsers the iframe for example scrolls down until the end and then starts scrolling the host window
In some post one suggested to overlay the iframe with a div (z-index: 2) and then forward the click events from this overlaying div to the Iframe window ( I do have control on this Iframe window, so I can catch events in there). The overlaying div fixed the scrolling behaviour on my testing page but not in my target application, so it's not a reliable solution. Besides that: I managed the click event to be triggered (with same approach as in 3.) but could not manage to make it click links in my iframe-page (what I need... because this is the reason why I want the clicks to be forwarded.)
Another approach was to forward the touch events from the Iframe page to the host page. I did this via postMessages, JSON-stringified event parameters and a javascript library called "jquery.simulate.js" that is used to simulate touch events. I did not manage to trigger the touchmove event correctly on the parent window (and besides that I doubt that this is really good concerning user experience and performance)
I also thought about getting the simple html from the Iframe and add it to the host page programmatically. Unfortunately SharePoint hosted Apps are hosted on other subdomains, so due to the cross-browser restrictions I think is not worthid to follow.
Another approach was pointer-action: None; - This also breaks the link functionality and unfortunately worked only on the desktop
Setting scrolling="no" (or "yes") did not have any effect nowhere (maybe because it's gone in HTML5)
So here I am stuck... and it seems that no one else in this world has the same problem as I cannot find any really working idea anywhere. But I tested around 20 different websites with iframe - and I tested with the Desktop touch and the iPad.... and I have the same problem. I could not find a single Safari-Touch-working iframe throughout all suggestions and possible solutions.
How to reproduce:
A simple
<iframe src="http://www.w3schools.com"></iframe>
embedded on any html page with long content, Safari and a touch device (similar to the ones I used for testing) should be enough to reproduce.
What I want to know:
Does anyone have the same problem?
Could you put me into the right direction? I am actually unsure which of the above mentioned approaches I should continue to go on with
Do you have a completely new idea that I could follow?
Did you test this on any other device and know it's working? (I am thinking maybe downgrading could be a solution)
Edit: (Solution Nr. 2) The overlaying div makes the page indeed also scrollable in Safari, but I could not find the correct way how to forward the click event to the child successfully (meaning: which of the event parameters are necessary to be forwarded to trigger the click event in the child window?)
Edit: Searching again and found out that you cannot create events like clicking programmatically due to security reasons. Makes sense as this will be a big security issue if you could force the user to click on your ads for example.
How can I click on specific (x,y) coordinates on a web page?