How To Run Script In V-html
I get embed codes (Instagram, Twitter and so on) from database. How to bind them to a vue component? Is there any way for executing script tag in v-html?
Solution 1:
Short answer: You can't. Your browsers blocks the execution of script tags once the dom has loaded.
Long answer: You could try matching the src attribute of the script and fetch + evaluate it, or match the inner content of the div and evaluate it, but this is not recommended.
Solution 2:
For the purpose of the title, the browser will block you.
However, for the purpose of the question, you can easily predict/list the embed codes you want to support, so this is something you could do:
if (window.twttr) {
// The script is already loaded, so just reload the embedswindow.twttr.widgets.load();
} elseif (!document.getElementByID('twttr-widgets')) {
const embed = document.createElement('script');
embed.id = 'twttr-widgets'
embed.src = 'https://platform.twitter.com/widgets.js';
document.body.appendChild(embed);
// And when the script loads, the embeds will load too
}
This can easily be replicated for most embed libraries that allow you to "reload" all the widgets on the page:
Post a Comment for "How To Run Script In V-html"