Cross domain iframe control/loading with Jquery/CSS - javascript

I need to embed my website onto another website, but remove the header and footer from my website and essentially just show the content.
The iframe gets built fine and loads the content into the page, and using an onload event, I've set the visibility so that the 'flashing' is removed on load. Separately in a JS file, I'm then removing the header and footer on document ready, which seems to remove them prior to the visibility kicking in. On the first load, everything works fine. When you navigate in the iframe, clicking a link, for instance, the window reloads with the correct information, except for a few seconds, it loads the header and footer and the removes them.
Ideally, the header and footer should never be shown at all.
The onload event is inline JS with the iframe, whilst the document ready is loaded when the iframe is loaded.
The document ready code (external Js)
if (window.location !== window.parent.location) {
setTimeout(function () {
$('.header').remove();
$('.footer').remove();
}, 500);
}
and the code to be embedded onto the separate domain/website:
<script>
function loadIframe() {
var ifr = document.getElementById("mySite");
ifr.style.height = '75vh';
}
</script>
<iframe style="visibility:hidden;" id="mySite" onload="loadIframe()" class="catalog-frame" src="http://xxxxxxx.com/about" width="100%">
</iframe>
Essentially, and perhaps the easiest way to manage this would be to, on change of the URL inside the iframe, hide the contents, then onload, show them again, but I'm having trouble detecting whether the URL inside the iframe is about to change/changing, to hide the content/hide the iframe.
As I have access to the actual contents being loaded into the iframe, is there actually a simpler solution here, although I will not have control over the parent domain?

As you mentioned you have no control on parent, so in my opinion you can do the following:
Add a script tag in your document's head as following:
if (window.location !== window.parent.location) {
$("body").css("display", "none");
//$("loading-pic").css("display", "block");
}
Then at the bottom of you body, add the following script for the function on ready function:
$( document ).ready(function() {
$('.header').remove();
$('.footer').remove();
//$("loading-pic").css("display", "none");
$("body").css("display", "block");
});
What should happen this way is: Whenever you will click any link on iFrame, nothing will be shown, and when the document would be ready, our last script will remove header and footer and then display the body.
You can also show a loading-pic while your content is being loaded.
Alternatively, you use a variable to store whether the current session is in iFrame or on a separate window, and send it as GET or POST with your each link and remove the header and footer from server side if required.

Related

How can I check if the contents inside an iframe is fully loaded and the src url is not down(404/not available) using angular?

I have an angular app which is having an iframe that loads a chat bot from an external url.I need to check if the url is fully loaded and the url is not down.
The iframe is initially not loaded on the dom and is only loaded after the user clicks on an icon.Since the iframe takes some time to load initially the iframe space will be empty.I tried showing a loader by setting it as background to the div that contains the iframe but the loader was always running even after the iframe is loaded.
Can somebody please guide me? Im new to angular.Im using agular 5.TIA
The simplest way to do this is to check onload events on iframe. ContentDocument of type Document, readonly, checks this frame contains, if there is any and it is available, or otherwise it will return null.
//Get reference of the iframe with reference variable and call
// onload event on it
iframe.onload = function(){
var that = $(this)[0];
try{
that.contentDocument;
}
catch(err){
//TODO
}
}

Open iframe page in its parent when a direct link is to one of the child pages

Hi I have multiple pages that reside in an iframe and I would like them to open in the parent page when say a search engine indexes them or people directly link to them.
Example:
-this page will be the parent page and have an iframe
-this will be first page.php
-then there will be second page.php, third page.php, fourth page.php, ect.
I would like it if someone linked to any of the pages that require the iframe to load the parent page with the iframe and load the url into that iframe. So if someone links to say third page it will load the parent page and load third page in the iframe.
I have tried the following scripts that I have found from posts across the web but they only load the parent page with the original src in the frame.
<SCRIPT LANGUAGE='javascript'>
try {
if (top == self) {
top.location.href = 'parent page.php';
}
} catch(er) { }
</SCRIPT>
And
<script type="text/javascript">
if (window == top) {
var url = 'window.location.replace("parent page.php?var1=' + window.location.href + '")';
eval(url);
}
</script>
I also tried:
<body onload="refreshFrame();">
Then I saw the post on Open iframe page in parent frame (javascript) here and it just brings up the page that was linked to and not the iframe.
The pages in the iframe are dymanically created as well so idk if that has anything to do with it or not.
But nothing seems to open the page inside of the iframe on my site it only loads the parent page with the original src first page in it. So idk if this is possible with either javascript or php.
Also idk if anyone knows how this practice effects seo there are not many words and no tags on the parent page so I was just curious about that too.
Thanks
Did you try use the base tag in you iframe pages? Something like:
<base target="_parent" />
UPDATE
OK, so in your scenario you need to know if the current page is loaded on brownser or via iframe. And if it's not on iframe, redirect to your another page where you calling the iframe.
First thing first, check if the current page is inside a iframe with js:
<script type="text/javascript">
if ( self === top ) {
//Its not an Iframe;
}
</script>
Now that we know if the page isn't load via iframe we can use a redirect inside that if statament:
window.top.location="http://www.yourdomain.com";
Now you need to make sure after redirect the page, the iframe src attribute will be the same url it was before. I'm assuming you can do that with a get parameter int the url? Let me know if find trouble in that part.
UPDATE2
Just add a get parameter in the url as i mentioned above. Something like this:
<script type="text/javascript">
if ( self === top ) {
//Its not an Iframe, needs redirect:
var url = window.location;
window.location="http://www.yourdomain.com/index.php?iframe="+url;
}
</script>
Now in your index.php ( or whatever is the page that contain the iframe):
<?php
$iframe_url = (isset($_GET['iframe']) && !empty($_GET['iframe'])) ? $_GET['iframe'] : "initial-url-content";
?>
<iframe src="<?=$iframe_url?>"></iframe>

How to force an iFrame to reload once it loads

I have numerous iframes that load specific content on my pages. Both the parent and iframe are on the same domain.
I have a scrollbar inside the iframe that doesn't seem to load correctly in all browsers. But when I refresh the iframe it loads perfect. I have no idea why it does this.
I have used the meta refresh, which works but I don't want the page to refresh constantly, just once.
The solution I'm looking for will reload the iFrame content after the iFrame is opened, with a minimal delay.
Edit
I realized that my page loads all of my iframes when the index is loaded. The iframes appear in a jQuery overlay, which is also loaded but visibility:hidden until called. So on this call is when I would want the iframe to be reloaded.
Could anyone help me come up with a Javascript function that reloads the iFrame when I click the link to the iFrame? I've gotten close but I know nothing about js and I keep falling short. I have a function that reloads the page, but I can't figure out how to get it called just once.
I have this so far:
<script type="text/javascript">
var pl;
var change;
pl=1;
function ifr() {
if (pl=1) {
document.location.reload([true]);
alert("Page Reloaded!");
change=1;
return change;
}
change+pl;
}
So basically it uses the document.location.reload which works to reload the page. I'm trying to then make pl change to something other than 1 so the function doesnt run again. I've been calling this JS from the body with onLoad.
All the leads on this went dead, but I did find a code snippet that worked. Not written by me, and I don't remember where it came from. Just posting to help someone should they ever have the same question.
<div class="overlay-content"> //Content container needed for CSS Styling
<div id="Reloader">
//iFrame will be reloaded into this div
</div>
//Script to reload the iframe when the page loads
<script>
function aboutReload() {
$("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
}
</script>
</div>
Basically just loads the iFrame source when the window with the iFrame opens, as opposed to the iFrame loading when the original page loads.
Beyond the scope of the original question, however this jQuery snippit works with cross domain iframe elements where the contentDocument.location.reload(true) method won't due to sandboxing.
//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload
Basically it replaces the whole iframe element with a copy of itself. We're using it to force resize embedded 3rd party "dumb" widgets like video players that don't notice when their size changes.
On the iframe element itself, set an onload:
iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};
(Only works if the iframe's location is in the same domain as the main page)
Here's a complete solution to the original question:
<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
iframeLoadCount ++;
if (iframeLoadCount <= 1) {
iframe.contentWindow.location.reload();
console.log("reload()");
}
}
</script>
The updated question is not really clear (what's "the link to the iFrame" and where is it in your snippet?), but you have a few issues with the code:
"calling this JS from the body with onLoad", assuming you mean an iframe's body, means the variable you're hoping to use to avoid infinite reloading will get clobbered along with the rest of the iframe's page when it's reloaded. You need to either load a slightly different URL in the iframe (and check the URL on iframe's onload before reloading) or put the flag variable in the outer page (and access it with parent.variableName - that should work I think)
if (pl=1) { should use ==, as = is always an assignment.
change+pl; has no effect.

Control Inner iframe's from parent

According to this answer:
Invoking JavaScript code in an iframe from the parent page
I have an iframe that loads a page that has a div with the id flash_container
<iframe src="http://www.remote.com/a.html" id="iframeID">
I placed this code on my parent page (the page that loads the iframe) but it doesn't seem to work:
document.getElementById('iframeID').contentWindow.targetFunction();
function targetFunction() {
var el = document.getElementById('flash_container');
el.style.zoom = 0.7;
el.style.MozTransform = 'scale(0.7)';
el.style.WebkitTransform = 'scale(0.7)';
}
What I'm trying to do is to zoom-out the inner page inside the iframe from the parent page.
It's impossible to say for certain what's wrong, but I have some ideas you might want to look into.
Make sure that the iframe is loaded. Trying to do something inside a frame that hasn't finished loading clearly won't work
Are you sure that you don't have cross-domain problems. You cannot manipulate the contents of a cross-domain iframe.
Actually you could, if both side (your page and the page in the iframe) agree on sharing information, you could use message passsing. See https://stackoverflow.com/a/7938270/1571709

jquery callback after if statement

Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });

Categories