i have a site with more than 20 tags.
almost each tag with a different domain.
i'm thinking of adding a link with rel="preconnect" to all of them.
<link rel="preconnect" href="//cdn.example.com" crossorigin>
does it make sense? can performance decrease from that?
also, does it make sense to add it from client side?
<script>
var res = document.createElement("link");
res.rel = "preconnect";
res.href = "//cdn.example.com";
document.head.appendChild(res);
</script>
Related
I developed an app with autocomplete and google API. Auto complete populates a form and saves it.
It works fine on local, but when deployed on Heroku I can only use auto complete once to populate the form.
After that I have 2 options:
I need to either press ctrl + f5
Or wait a few hours (around 8 hours)
I tried all sorts of solutions and tried different browsers.Same problem.
Which leads me to think it might be the way the Hobby Plan of Heroku handles cache.
Does any one have any experience or information that could potentially confirm this theory?
Code below as required (edit)
google_places_names.js file
function initAutocomplete(){
autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
componentRestrictions: {'country':['uk']},
fields: ['name','geometry','address_components'],
types:['establishment','geocode']
});
autocomplete.addListener('place_changed', fillInAddress );
}
html
{% load static %}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXX&libraries=places&callback=initAutocomplete""></script>
</head>
{% block content %}
<input id="autocomplete" style ="width: 500px "placeholder="Enter your address">
{%endblock%}
</html>
I'm currently trying to build a click to dial link in the browser as an Outlook Addin. I'm getting the error:
Refused to frame '' because it violates the following Content Security Policy directive: "frame-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. tel:' must be added explicitely. [https://localhost:44371/]
I've set the meta tags a bunch of different ways trying to explicitly state the tel scheme that they mention. For instance:
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' tel:">
I've tried about 20 different variations on this. I've also noticed that many people are saying something about changing the HTTP response headers, but I'm not sure exactly how to do this or even why it would be needed.
I'm working on Visual Studio using a template from their own program. Because I'm testing this out on my own computer, I've also tried to whitelist my own localhost. Still nothing.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' tel:">
<title>standard_item_properties</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="default_entities.css" />
<script type="text/javascript" src="MicrosoftAjax.js"></script>
<script src="CallFunctionFile.js" type="text/javascript"></script>
<!-- Use the CDN reference to Office.js. -->
<script type="text/javascript" src="default_entities.js"></script>
</head>
<body>
<!-- NOTE: The body is empty on purpose. Since this is invoked via a button, there is no UI to render. -->
<div id="container">
<div><a id="tel-link">Make Call from Phone</a></div>
</div>
</body>
</html>
and here is the javascript:
// Global variables
let item;
let myEntities;
// The initialize function is required for all add-ins.
Office.initialize = function () {
const mailbox = Office.context.mailbox;
// Obtains the current item.
item = mailbox.item;
// Reads all instances of supported entities from the subject
// and body of the current item.
myEntities = item.getEntities();
JSON.stringify(myEntities.phoneNumbers[0].originalPhoneString));
// Checks for the DOM to load using the jQuery ready function.
window.addEventListener('DOMContentLoaded', (event) => {
// After the DOM is loaded, app-specific code can run.
});
let a = document.getElementById("tel-link");
a.href = "tel:" + encodeURIComponent(myEntities.phoneNumbers[0].originalPhoneString);
}
I'm trying to create a reval Modal Foundation 6 and Ajac, but does not work.
I followed the official guide
Page html
<!DOCTYPE html><html lang="it">
<head>
<title>Avvisi</title>
<link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript">
</script><script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/foundation.reveal.js" type="text/javascript"></script><link href="http://ci.dev/assets/css/reveal.css" rel="stylesheet" type="text/css" /><link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" /><script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script></head>
<body>
<h2>Title</h2><p>Message</p>
<span><a href='http://ci.dev/AR-PIB/warn/edit_v/160/284'>Edit</a></span><span id='160|284'><a class='big-link' href='#' data-reveal-id='myModal' data-animation='fade'>Delete</a></span></div><hr/>
<script type="text/javascript">jQuery(document).ready(function() {
jQuery('.big-link').click(function(){
var dati = jQuery(this).parent().attr('id');
var $modal = $('#modal');
alert($modal)
$.ajax({'http://ci.dev/AR-PIB/Warn/delete'})
.done(function(resp){
alert(resp);
jQuery('body').append(resp);
$modal.html(resp.html).foundation('open');
conaole.log(resp);
});
});
});
</script>
<script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script></body></html>
I'm not sure why it's not working exactly as I can't run your code (the links http://ci.dev/... seem to be local to your machine), but it may be one of the following:
You have an close div but no open
You're attempting to use the Foundation JS ($modal.html(resp.html).foundation('open'); etc.) before you have initialised Foundation (if in app.js, per your comment, this is after the Reveal code)
foundation.min.js (unless you have generated a slimmed down version) includes both the motion UI and the reveal so you don't need to add each JS file
You're missing a ; after alert($modal)
I think you mean console.log(resp); rather than conaole.log(resp);
You reference the element $('#modal') but there is no element on the page with the id modal (your link also has data-reveal-id='myModal')
According to the Foundation Docs:
http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins
Just add a Foundation.reInit('abide'); and it should work right away!
I found a solution that works with Zurb Foundation 6.3.2, as explain in https://foundation.zurb.com/sites/docs/javascript.html#programmatic-use
in the ajax done function :
var $modalContent = new Foundation.Reveal($('#modalContent'));
$modalContent.open();
I would like to add pinterest's nopin code to my site, inside the <head>.
I am using a custom theme and navigated to: app/design/frontend/default/THEME NAME/template/page/html/head.phtml
I also tried: app/design/frontend/base/default/template/page/html/head.phtml
I pasted the nopin code provided by Pinterest:
<meta name="pinterest" content="nopin" description="Sorry, we do not allow pinning of our copyrighted materials" />
No joy! Is there a location that I can post this or do I need to protect each image another way?
If you want to cover the entire site, the tag must be placed in
\app\design\frontend\default\theme_name\template\page\html\head.phtml
assuming Current Package Name is "default".
Flush the cache and reindex all the data
Tested on my dev site and is showing the message: "Sorry, we do not allow pinning of our copyrighted materials"
Also check your pinterest code. I use this one:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
Hope this helps
1) I have to change images dynamically according to values for every x seconds.
I'm using the following function:
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
It works fine for updating the value, but the images not getting updated into its position.
2) From the 1st question i want to know whether the jquery and css files included in the head tag will load every x seconds or not. if not how to load?
Please give me the suggestion.
If you are returning a whole HTML page and returning it into the body of another page, that is a bad idea.
Think about it, your html structure would be something like
<doc type>
<html>
<head>
</head>
<body>
<div>
<doc type>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
</div>
</body>
</html>
Ideally you should be retuning just the content that is to be displayed, not everything.
If you are just updating images, there usually is no need to make an XHR call. You can just set the image src and force the browser to update that content that way.
Does this need to be done with Ajax at all? How many images are you going to cycle through? If it is only a few, just keep all of the src's on the page and switch the image src attribute periodically. This requires no page reload. You may also want to preload all the images so there is no flicker when changing to the other image. For example:
$(function () {
var images = ['1.png', '2.png', '3.png'];
$.each(images, function (index, src) {
$("<img />").attr('src', src); //preload
});
var keep = 1;
setInterval(function () {
$("#main_img").attr('src', images[keep]);
keep++;
if (keep >= images.length) { keep = 0; }
}, 5000);
});
Now if you don't want to hard code the image urls in the JS, you can load them initially with a single Ajax request.
I would only recommend using Ajax to do all the work if you are talking about an unpredictable set of images or some massive number of images.