I have multiple textboxes on a seperate page, which I intend to display on another page, together, each with an iframe.
I found a script in an older post, which made that possible.
However: Only the first iframe on a page is targeted by my script. Which means I have 3 more iframes with scrollbars. Once I reload the page, I can see the other iframes for a split second in their inteded height, before the site is fully loaded and they change back to those ugly scrollbars.
On the source page I use this script next to my textblock:
window.addEventListener('load', function() { let message = { height: document.body.scrollHeight, width: document.body.scrollWidth };
// window.top refers to parent window
window.top.postMessage(message, "*");
});
On the final page I inserted the script in the same HTML box as the iframe:
<iframe src="https://whateverpage.com/" id="someid"></iframe>
<script>
let iframe = document.querySelector("#someid");
window.addEventListener('message', function(e) {
// message that was passed from iframe page
let message = e.data;
iframe.style.height = message.height + 'px';
iframe.style.width = message.width + 'px';
} , false);
</script>
I'm not the brightest when it comes to javascript. That's why I use Elementor for most of the stuff I do ;)
So I have changed the ID in each iframe to be unique. Still, there is always only the first iframe element which displays as intended. I swapped the iframes around and played with different layouts of columns, but it is alway the first element which is affected by the scripts.
I'm thinking about having the two scripts appear only once on my pages, but I don't know how to do that. I'd appreciate other ideas to make that work...
Related
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.
Context:
PARENT PAGE loads an IFRAME that contains an app/plugin
PARENT PAGE has different domain than the IFRAME
PARENT PAGE and IFRAME both have installed the iframeResizer plugin -> the iframe has no scroll bar (all content is shown on parent page) - IFRAME is always resized based on its document height
PARENT PAGE html/js cannot be changed, only the IFRAME
Problem:
If the user is at the bottom of the IFRAME, and performs an action, how do you scroll him at the TOP OF THE IFRAME?
Solutions that DO NOT work:
window.scrollTo(0,0); // from iframe
anything with window.parent from iframe (cannot access)
use an anchor at top of iframe body and rewrite window.location
Solutions that do work?
will post one as an answer (it works, but it's weird...and not good for IE)
You can try using document.body.scrollIntoView().
It should work on IE8+ and the other browsers (I only tested it in Chrome, FF and IE11)
See codepen demo here.
document.body.scrollIntoView();
This works fine in Chrome & Mozilla (IE not working, why?) ... but it doesn't seem like the right approach.
DEMO Code pen demo
Create an input field in the IFRAME
Style the INPUT to make it not visible to the user
Scroll parent page by focusing the input from the IFRAME
// IFRAME JS
// initialize a "scroller" object
var scrollPage = (function(){
var input = document.createElement("input");
input.style.position="absolute";
input.style.top="-50px";
document.body.insertBefore(input, document.body.firstChild);
return function(){
input.focus();
};
})();
// use the "scroller" when needed
scrollPage();
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.
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
I have several linked pages I want to display in a modal iframe. The pages are not the same size and I want to be able to resize the iframe when each new page is loaded. I have looked at several jquery plugins to create the iframe, but can't figure out how to resize any of them. I am currently experimenting with prettyPhoto and nyroModal, but am open to suggestions. I just need to make it work. Also I am not very good with JavaScript, but I am trying to learn.
NOTE: all my pages are on my web server, so there is no issue with cross domain.
Thanks for all the quick responses. I'm headed to bed but look forward to trying out your suggestions when I wake up.
Try putting this in the iframe:
document.onload = function() {
var i = parent.document.getElementById('myIframe');
i.style.width = document.body.offsetWidth+"px";
i.style.height = document.body.offsetHeight+"px";
}
When loading pages to iframe you probably will encounter cross-domain problems. Accessing page inside the iframe from parent's JS is blocked.
If you want to do it easily - keep track of what is loaded int o the iframe in your code and resize it manually to hard-coded dimensions.
Create an array of dimensions you want to use for each page and use this function:
function() {
var i = document.getElementById('myIframe');
var sr=i.src;
i.style.width = myDimensionsArray[sr][w]+"px";
i.style.height = myDimensionsArray[sr][h]+"px";
}
You can use postMessage for this. In your iframe write this:document.body.onload=function(){
parent.postMessage("resize_me", "*");
}In your main page:window.addEventListener("message", function(e){
if(e.data=="resize_me") {
//resize the iframe
}
}
There are 2 cases here:
iframe is loaded after the modal is open
iframe is loaded before the modal is open
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(".modal").on('shown.bs.modal', function () {
resizeIframe(document.getElementById(IFRAME_ID));
});
window.onload=function(){
document.getElementById('IFRAME_ID').addEventListener('load', function(){
resizeIframe(document.getElementById(IFRAME_ID));
});
}
In case of
When the iframe is loaded, the iframe will resize
when iframe is loaded, as the modal is invisible, it wont be resize hence it needs to resize again the the model is shown.