I have an iframe with dynamic content inside that needs to be displayed on a page and I'd like it to show as quickly as possible. However, there seems to be some lag between when the content of the iframe is loaded and when the iframe is resized on the host page. Currently, the initial dimensions of the iframe are height = 0 and width = 100% so that when the content is loaded in the iframe, iframe-resizer will automatically adjust it to the correct height.
However, I noticed that if there is an autoplay video within the iframe, I can hear the audio for as long as a minute before the iframe will get resized. When checking the browser console, I'll see warning messages of iframe-resizer being unresponsive, but after a minute or so, the iframe will get resized and the content will be revealed.
I have a google analytics tracking code within the iframe content and noticed that if I removed it, the iframe-resizer becomes much more responsive and the content gets loaded quicker. How can I get the iframe to act responsive with the google analytics tracking code running inside of it? How can I get the iframe-resizer to work before the GA script finishes loading?
Also, is setting the initial iframe height to 0 and then allowing iframe-resizer to size the frame the proper way to initially load dynamic iframe content?
edit (adding code):
here's the code i run on the host page
var hzframe = iFrameResize({
checkOrigin: false,
initCallback: function(){
var x = document.getElementsByClassName("hzload");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
},
resizedCallback: function() {
var x = document.getElementsByClassName("hzload");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
},".hzframe");
if you want to see the whole thing in action you can check out this jsfiddle
Currently, I have the same code that hides the loading gif in the initCallback and resizedCallback because the gif doesn't always get hidden by the initCallback.
If your just hosting a video in your iFrame then this might work better for you.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
The issue with GA is very strange, can you defer it running if it is blocking the page load event firing?
Related
I am using Aplication Customizer to add jQuery and custom javascript to my page:
let current_date: Date = new Date();
let date_String: string = current_date.toString();
date_String = current_date.toISOString()
console.log('date_string = %s', date_String);
SPComponentLoader.loadCss('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.css?d=' + date_String);
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String)
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String);
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String, {
globalExportsName: 'jQuery'
}).then(($: any) => {
$(function () {
console.log('jQuery is loaded');
});
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String, {}).then(() => {
//...do something
});
});
The code runs fine when I open the page. However, if I navigate to the page from the main site navigation (ie the mega menu) the code doesn't run. Yet if I click on the link a second time in the nav, it loads the page and the code runs.
In other words, it doesn't rung when you change pages via the nav, but if you load the same page (or reload the page with F5) it does!!!
Is this some kind of caching issue? I am using Sharepoint Modern/Online so there is no caching setting for the site.
Any solutions gratefully received.
According to your description, as far as I know, custom code is usually loaded when the entire page is refreshed. And the first time you enter the page via the navigation, the entire page refresh is not triggered, so no code does not take effect.
SharePoint Online works online. If you are worried that the cache has affected this matter, you can try to clear the cache of the browser, or switch to the private mode to see if the problem is resolved.
Seems to be a routing interceptor that will check your link and if appropriate, do a partial navigation, ie avoiding a full page load.
To work around and force javascript to run, add
data-interception="off"
to all links eg by script
$('a').attr("data-interception", "off");
I have been trying to load some PDFS that will show inside a Bootstrap accordion. The problem is that they load in a lot of different ways depending on the browser. I've been trying iframe and object html tags with different results and i have a huge flow in Safari where the accordion functionality breaks completely when i embed a PDF inside a panel.
So i guess my question is: Is there any sort of standard regarding crossbrowsing in order to make embeded PDF'S work in Chrome, Safari, IE11 and Firefox ?
Since i need this to work on mobile the situation is even worst. Some advice will be really appreciated.
Create a canvas element with the class "panel-body" and give it an id of your choosing. Then add the following code to your document ready event.
PDFJS.getDocument('YOURPDF.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('pdfOne'); // The id of your canvas
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
That will get the first page rendered. You'll need to create buttons to let the user navigate through the document but it should be easy enough to get that working based on what I've provided and the samples.
I am trying to make a Chrome extension such that to play songs from youtube. I have done this but I have a small problem. When I click the extension icon, a popup appears where I can search the song and play it, but when the popup disappears, the music stops playing. What can I do to make the music play in the background?
Here is the function that finds the song, and inserts iframe tag into my popup.html page
function showResponse(response) {
var responseString = response;
document.getElementById('response').innerHTML = responseString.items[0].id.videoId;
var videoId = responseString.items[0].id.videoId;
var iFrame = '<iframe width="300" height="300" src="https://www.youtube.com/embed/' + videoId + '"></iframe>';
document.getElementById('player').innerHTML = iFrame;
}
When the popup closes, the page that it contains is immediately and completely unloaded.
So your iframe is destroyed. And no, you can't keep the popup open.
An extension has one persistent page - the background page. You can try adding your iframe there - the sound should continue to play.
However, the page is invisible - you can't let the user control the player. Any user-accessible controls will need to be in the popup or some other UI.
I have a site, not visible to the public, where I use safecracker and matrix fields in several locations. On pages that load normally, everything is fine. But when the matrix fields appear in an overlay (using colorbox), the matrix-menu div isn't created.
Stepping through the code with FireBug, the issue seems to be that the line:
var $body = $(document.body);
doesn't set $body correctly (maybe this is a race condition for the overlay loading?). So when it gets to this chunk of code in matrix.js:
obj.menu.$ul = $('<ul id="matrix-menu" />').appendTo($body).css({
opacity: 0,
display: 'none'
});
$body doesn't resolve, so the menu can't attache anywhere. I think I've fixed it, but want to check and see if I should be worried that I'll break anything else. If I change the above code to:
obj.menu.$ul = $('<ul id="matrix-menu" />').appendTo($(document.body)).css({
opacity: 0,
display: 'none'
});
everything seems fine. Is there a better way to address this?
If the Matrix field doesn’t have a height when it is first initialized, it puts most of its initialization stuff on hold, assuming that it’s either hidden by default or lives on a secondary publish tab. This cuts down on the initial page load time and also fixes some issues with some celltypes (Text, Assets, maybe others.) that need to know the dimensions of DOM elements within their cells.
Matrix will automatically resume its initialization when it has been expanded or its tab has been clicked on, but if you’re using Matrix outside of the Publish page and hiding it, you’ll need to trigger that initialization-resuming yourself:
for (var i = 0; i < Matrix.instances; i++)
{
Matrix.instances[i].initRowsIfVisible();
}
Using phantomjs, is there a way to control the DPI setting used when rasterizing an image of the web content using the page.render(filename) method?
I can't find anything that would control this via the interface api, but didn't know if someone has already figured out a way to do this.
Our business-case looks like this:
Custom HTML content created via a web application is fed to our rasterize.js phantom process and is queried for a specific tag to set the client rectangle.
This client rectangle is rendered to a PNG of the HTML that can then be used as an image elsewhere.
We want the resolution of the resulting PNG to be something higher than the default, due to aliasing on the text at some odd font sizes/bold combinations.
I may be mixing up DPI with something else, but have you looked into the zoomFactor option? Setting that on the page object will cause the rendered image to zoomed.
This fork allows setting the dpi https://github.com/martonw/phantomjs/tree/issue-%2313553
You can set then the dpi with page.dpi = 72
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
page.dpi=300; // this is where you actually set the DPI
page.render("test.pdf");
phantom.exit();
});