I want to use the Facebook comments box on my WordPress page where I use "handlebars js", which dynamically loads my HTML content with a script on my page.
When I add the Facebook html code:
<div class="fb-comments" data-href="http://mysite/mypage/" data-numposts="5" data-colorscheme="light"></div>
anywhere on the page it works fine, but when I use it within the handlebars script, it does not (except for like 1 time out of 20!).
I have tried changing the Facebook JS SDK to load asynchronously, as I suspect the issue has to do with the order in which my scripts are loaded, but still no luck.
You need to parse the plugin with FB.XFBML.parse after appending the Handelbars content to the DOM. Btw, that´s another topic, but you should ALWAYS load the JS SDK asynchronously, and make sure it is loaded before using FB.XFBML.parse.
Make sure to call the parse function after appending the Template content to the DOM.
Related
I am trying to make a widget that I can add to another website through code embedding, much like tawk.to.
I have tried using iframe and object with embed but for some reason it is slow. As a page it fetches the images fast but when I embed it, it is slow. Also I heard that it is not best practice.
So I searched what other websites are doing and I found out that disqus is using iframe and tawk is using the below code. As messaging widget don't use much data, iframe seems to work but in my case, my widget is fetching a lot of data from an API.
tawk.to is using this code:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/APIKEY';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
I already have a page and I want to put in inside another website page using something?
And it is gonna display a small icon like tawk.to and when clicked it's gonna show the page inside the widget.
How can I achieve this?
Using an iframe as in itself is not slow however if you insert the iframe directly then it will load inline with the rest of the page. The approach that Tawk.to use is:
Simple javascript (as you have already pasted), which simply creates a second script element within the page, explicitly sets it to async, and then adds it to the DOM - this then triggers the script to load.
This script will then call the Tawk servers, and return a more complete javascript, containing their full code, but without slowing the page load down.
In the case of Tawk.to they do use an iframe to display their chat widget - which is generally a straightforward way of ensuring there are no styling clashes, or if wanting to load a remote page directly.
I have created widgets both in this way, and also by adding elements directly to the DOM. The key part here is the js chaining - the first script does nothing except construct the second and doesn't impact page load.
Applying this to your case, you could:
Use similar JS chaining to load your main JS script
Have the main JS script add a hidden iframe which loads the page you already have.
Add a button element to the DOM which toggles the visibility of the iframe you added.
I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components
If you want to download the html code of a site, you can use the .ajax (), like this
$.ajax({url: 'https://somesite.com'})
But what if the site uses lazy load?
When you try to download site via .ajax, you get a page without dynamically loaded content.
Are there any way to get the html code for the site after it fully loads all the content?
You have to attach the loaded HTML to the DOM, then it will be parsed and any JS scripts will be executed which leads to lazy loaded content being downloaded.
$('.content').append(theDownloadedContent);
It's a known fact that jQueryMobile loads pages with ajax and is not including in DOM the header content in every pages.
I need to load a custom js file in some pages, how can I achieve this? Until now I have placed the .js files in the body, but there are some problems with the code there too so it's not a good workaround. Until I can find a solution I will use the rel="external" workaround, but I really need to find an answer to my question.
You could try including the custom script within the data-role="page" div in pages where you want to use those javascript.
From JQM docs:
Another approach for page-specific scripting would be to include
scripts at the end of the body element. If you include your custom
scripting this way, be aware that these scripts will execute when that
page is loaded via Ajax or regular HTTP, so if these scripts are the
same on every page, you'll likely run into problems. If you're
including scripts this way, we'd recommend enclosing your page content
in a data-role="page" element, and placing scripts that are referenced
on every page outside of that element. Scripts that are unique to that
page can be placed in that element, to ensure that they execute when
the page is fetched via Ajax.
You could use some javascript to dynamically add the js file to the DOM.
This is demoed here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'