Recently I added an iFrame using the following code I found online:
"<iframe id=“personio-iframe” style=“border: none;” src=“my website address is here” width=“100%” onload=“window.top.scrollTo(0,0);“> window.addEventListener(‘message’, function(e) { var iframe = document.querySelector(‘#personio-iframe’); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case ‘setHeight’: iframe.style.height = data + ‘px’; window.scrollTo({ top: 0, behavior: ‘smooth’ }); break; } }, false);"
I noticed whenever I click on any part inside an iFrame the page scrolls up.
I can see the two lines in the code that mention scrolling up, but when I tried to delete them the frame doesn't show properly, it's displayed as a narrow bar on the page.
Can you please let me know how can I modify this code to successfully get rid of the scrolling up without damaging the iFrame itself?
Please try this line:
<iframe id="personio-iframe" style="border: none;" src="your website address is here" width="100%" height="600px">
This is optional for your css, with it the iframe will not go over 90% of screen height
#personio-iframe {max-height:90vh;}
Related
I have an iframe that has a variable height which is not known in advance.
Currently, if the section in which the iframe loads is too small, the iframe loads with internal scroll bars. If the iframe happens to be a shorter iframe, there is empty space below the iframe before the footer begins.
Is there a solution available to this type of problem?
Well, adding simple JS code to get the iframe content height and setting the container height will do, as suggested by #relief.melone.
Other simple solution that can be of help, as an alternative :
https://github.com/davidjbradshaw/iframe-resizer
In reference to my comment. The first thing you have to solve is your cross origins problem. Most browsers will block requests to other websites if the response does not include the current host in their cross origins allow header. So in your case the header from your request to the iframe contents needs to include the header
Access-Control-Allow-Origin: http://159.89.229.184
and
Access-Control-Allow-Mehtods: GET
Also see https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing for more info on this.
Now to the actual solution.
You need to determine the height of your iframes contents and then set the height accordingly. You can do this by adding a javascript function. In your head section add
<script>
const setHeight = (frame) => {
frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
}
</script>
and your iframe needs to include the onload event
<iframe ... scrolling="no" onload="setHeight(this)" />
This should solve your problem. But as I mentioned just if you allow the cross origin access. Otherwise you access to the document of frame.contentWindow will get rejected with an error like
VM747:1 Uncaught DOMException: Blocked a frame with origin "http://159.89.229.184" from accessing a cross-origin frame.
I also made an example on glitch to demonstrate how it works (Click on Show to see it in action)
https://glitch.com/edit/#!/iframe-varialbe-height
I had s situation where the height of the iFrame content changed dynamically, and I told the parent frame (containing the iFrame) to change it's height accordingly using postMessage: like this
Parent window:
<section class="module">
<div class="row">
<!-- Content column start -->
<div class="col-sm-12" id="web-version-container">
<iframe id="web-version-frame" src="index.html" allowfullscreen=false frameborder="0" style="width:100%; height:100%;min-height:800px;">
</iframe>
</div>
</div> <!-- .row -->
</section>
<script>
window.addEventListener('message', function(event) {
// IMPORTANT: Check the origin of the data!
if (~event.origin.indexOf('https://yourdomain.com')) {
// The data has been sent from your site
if (event.data.messageName) {
switch (event.data.messageName) {
case "documentHeight":
if (event.data.messageValue && parseInt(event.data.messageValue) > 500);
var newHeight = parseInt(event.data.messageValue) + 50;
$("#web-version-frame").css("height",newHeight.toString() + "px");
break;
}
}
// The data sent with postMessage is stored in event.data
} else {
// The data hasn't been sent from your site!
// Be careful! Do not use it.
return;
}
});
</script>
Child window:
if (window.parent) {
window.parent.postMessage(
{
messageName: "documentHeight",
messageValue: $(".content-active").height()
},
"*"
);
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
In the iframe that you have added in second example has the css property min-height as 1600px. Use a percentage for min-height or height to fix the issue. Added min-height: 275vh; and it fixed the issue.
.job-detail-iframe iframe{
width: 100%;
min-height: 275vh;
}
Check this out also as a reference.
Using Html2canvas, jsPdf, and angularjs to take a screen shot of a portion of my webpage to show as a pdf preview. I was able to successfully export the content to the pdf, but it only shows half of the content. What can I do to fix this?
Here is the button that creates the pdf. (rollup.html)
<button ng-click="genPDF()">PDF Test</button>
Within the controller, I used the html2canvas function (rollup.js)
Here I believe 'document.body.appendChild' may be the key because when it is uncommented it shows another copy of the table within the webpage when 'pdfTest' is click, as well as within the pdf preview, but only half of the content.
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.genPDF = function(){
html2canvas(document.getElementById("testDiv"), {
onrendered: function (canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',10,10);
doc.save('test.pdf');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
//width: 300,
//height: 300
});
}
});
Of course within the html page where the table is created, I have an id of testDiv within the div to the content I want appearing in the pdf.(route.html)
<div class="row" id="testDiv">
....all the table content
</div>
How can I fit the full content to the pdf preview without it cutting off? Any help is greatly appreciated.
Found a solution where I add parameters to the doc.addImage.
doc.addImage(img, 'JPEG',10,10,190,200);
I am not sure how to make the image 100 % of the pdf page, but with this I can set parameters that work best for the table atleast. Hopefully I can find a better solution, but this works for now.
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
I have an iframe without src. This because the iframe only shows webpage content (from the src) when a user clicks a button (the src is then replaced by a webpage URL). That button is already working.
But when nobody clicks the button, the iframe has to show some simple default text instead of that webpage. In my example I have written the text line 'This text must be displayed by default.'. Why is the text not showing up?
I need to keep the onload javascript, because that is important for the functionality of the iframe.
<iframe src="" class="prodframe pc" style='bottom:0px;position:absolute;width:90%;height:73%;margin:0px auto;left:0;right:0;border:none;background:none transparent;' frameborder='0' scrolling='auto' allowtransparency='true' onload='window.onmessage=function(e){var c=0;var o=document.getElementById("zoekframe");if(o.offsetParent){do{c += o.offsetTop;}while(o = o.offsetParent);};scrollTo(0,c);};' id=zoekframe>This text must be displayed by default.</iframe>
I have a fiddle on the following link: https://jsfiddle.net/mfhdwmya/
This question is awfully similar to Alternate text for iframes
The accepted solution for that one is:
<script>
$(function () {
$("iframe").not(":has([src])").each(function () {
var ifrm = this;
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write($(this).attr("alt"));
ifrm.document.close();
});
});
</script>
I'd comment, but my reputation was not yet enough.
I have a menu with multiple links to videos that play through my company's internal video player. The videos are stored in amazon cloud service. Currently the videos href is within an a tag within an li within a ul. The menu is on the left hand-side, how do I open the videos on the same page in an iframe on the right hand side?
For some reason this is crashing Chrome in Stack Overflow when using the runnable code snippet, so here's a jsFiddle. Assuming you have the layout already, you just need to create an iframe with the correct properties, then put it in the container you have on the right side of the page. Do this on a "click" event.
var button = document.getElementById("open-video");
button.addEventListener("click", function () {
var iframe = document.createElement("iframe"),
container = document.getElementById("frame-container");
iframe.width = 420;
iframe.height = 345;
iframe.frameborder = 0;
iframe.src = "http://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
container.innerHTML = '';
container.appendChild(iframe);
});
<button id="open-video">Click to play video</button>
<div id="frame-container"></div>