I have an IFRAME in a page. And i have loaded another web page in that IFRAME.
But this newly added web page is not showing properly, i.e., web page is displaying without css.
If i open same web page in another window it displays normally with css.
I have searched a lot but haven't found any solution to resolve it.
Any Suggestions,
Thanks
Is the webpage from another domain?
Does the webpage of the iframe start with http while the parent page is https? Make sure the protocols are the same.
Related
My website pages are loaded in an iframe when the page is viewed on mobile.
I am trying to add GTM to the iframe but when I inspect it in developer mode, it shows that the iframe src is https://xxxyyyzzz.xxx/aabbccdd, which is the page itself. GTM is already installed on this page (and all pages) - Looking over the internet, people are saying that I should add a new GTM container snippet for the child frame specifically. But I have 2 issues:
I cannot seem to find where the child frame is located
The page loading in the iframe contains already my GTM script and no script snippets
The events are firing on desktop but not on mobile so I'm missing something but not sure what!
I'd love to have some help on this <3
I have added a iframe portlet and have given the URL of an application to my Liferay portal.
When I click on the log in button / or app:
I want the iFrame portlet to automatically maximize and or navigate
to another page.
I don't want to add a page in the Liferay portal and then give the
URL, instead when I click the portlet, the application has to appear
in a new page or maximized mode.
How do I achieve this?
You can do this if you have control (code control) over the app inside the iframe and they are from the same FQDN.
Create 2 pages in liferay like /home & /login, both would have iframe portlet configured with different URLs.
/home: This would show your initial iframe-portlet and on click of the login button in your app you can give the URL for /login page which would have a one-app layout and iframe would fill in the whole page.
/login: This page would have the URL configured in iframe of the page which appears in your app after you click login.
OR
You can have an onLoad script in your app within the iframe for the second page which appears after clicking on login, this script would maximize your iFrame when the second page is loaded inside iframe.
OR
You can use a hook to have a script in your iframe portlet to increase the height and width of the iFrame dynamically based on the content within.
But for the second & third method to work you would need that Liferay and the app inside iFrame share the same FQDN, or else your script won't work due to cross-domain scripting security.
For method's second and third here are some solutions:
Resizing an iframe based on Content
Change iframe height dynamically based on Content
What if you don't have control over the child-app and have a different FQDN?
If you do not have control over the child-app inside iFrame then my friend you are out-of-luck here since iFrame does not have access to the child-page (due to security reasons) nor does the child-page knows anything about the parent.
Here is another link that explains a lot and offers some solutions based on easyxdm which allows Cross-domain messaging:
Yet another cross-domain iframe resize Q&A
Hope this helps.
I know the page reload concept via ajax without page refresh.
But facebook pages reload through normal page load. but sidebar's not loading just reload content area.
How is it possible?
Advance Thanks friends
Facebook uses bigpipe
The general idea is to decompose web pages into small chunks called pagelets, and pipeline them through several execution stages inside web servers and browsers. It is implemented entirely in PHP and JavaScript.
Clicking and taking some action on a webpage initialize/executes a pagelet, response generates from iframe or from ajax as well. Read the response and show it to a small chunk, this will not refresh the page.
I believe they are using the new history.pushState functionality in HTML5.
I have an ASP mobile site and I am using jQuery mobile. I have problem using recaptcha on my contact page. it disappears when the captcha is wrong. It works fine when i am not using jQuery mobile. Any help pls? i am using jQuery validate plugin too.
Thanks
I was experiencing a similar issue - my team used jQuery mobile's ajax page linking to navigate to our sign-in page which used reCaptcha. The ajax call would cause the page to load, at which point the reCaptcha form would render and hide all other content. Refreshing the page would load everything properly.
My fix to this was to remove the ajax linking to the page. From the jQUery mobile manual:
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.
In version 1.1, we've added support for using data-ajax="false" on a
parent container which allows you to excluded a large number of links
from the Ajax navigation system. This avoids the need to add this
attribute to every link in a container.
Note: When building a jQuery Mobile application where the Ajax
navigation system is disabled globally or frequently disabled on
individual links, we recommend disabling the $.mobile.pushStateEnabled
global configuration option to avoid inconsistent navigation behavior
in some browsers.
This fixed our loading issue, but now we experience another issue: when navigating from the sign-up page back to our landing page, and back to the sign-up page jQuery mobile causes the browser to reload the landing page. Still working on fixing this.
Edit:
After thoroughly reviewing my code I noticed that the page I was calling had html, head and body tags, pulled jquery.mobile-1.0.min.js and jquery-1.6.4.min.js twice, and was included in a template.
Once I removed the extra html, head and body tags (as well as the js includes), the page displayed properly.
how can i get url of the website which is in iframe, when i click on any links in website in iframe it is redirect to another page in the iframe then how can i get the page url.
can u help me. thank you.
You can use jquery to make it easier:
alert($("#iframeid").attr("src"));
You can also use jquery contents() to retrieve or manipulate any tags inside that iframe. example:
$("#iframeid").contents().find("a").css("background-color","red").end().find("title").text();
Unfortunately, you don't really have much control over an Iframe once it loads. I think pretty much the only thing you have control over is the ability to reload it with a new URL programatically.
If the page loaded by the Iframe is part of your website (not 3rd party), you can process the request server-side.
From javascript? If you can run some JS inside the iframe:
alert(document.location.href);
If you can't - need to get a reference to the iframe in question:
IE:
alert(document.getElementById(iframeId).contentWindow.document.location.href);
FF, Safari, Chrome, etc:
alert(document.getElementById(iframeId).contentDocument.location.href);
As mentioned - you wont be able to do this if the URL that is loaded is not from the same domain as your website.