We Keep Coding

Export current iframe content as HTML file

Here is the thing - I'm trying to create kind of email signature generator. Most of the index file, is a pure HTML code + tiny javascript. Inside index file I'm embeding email signature template as an iframe/email_signature.html file. So it looks as follows:
<iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="testing" name="emailSignature"></iframe>
Then I'm trying to download current content of this iframe by executing this code:
$(document).ready(function() {
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
$("#cmd").click(function(){
exportFile('new-file.html', $innerFrame.innerHTML);
});
});
but it doesn't work. Here is the example fiddle:
https://jsfiddle.net/py1tojmc/
What I'm doing wrong here?

From what I can see in the dev console opening your jsfiddle, i don't see any "event" attached to your download button.
I can't tell you why this is happening (I'm not that expert), but maybe the call to .contentWindow.document.body.innerHTML; is somehow changing the DOM context to the iframe (just a guess), and it seems you cannot access the button id #cmd anymore.
Try changing your code like this ans see if it works:
$(document).ready(function() {
$("#cmd").click(function(){
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
exportFile('new-file.html', $innerFrame.innerHTML);
});
});

Yeah looks like the button event won't fire. But could be cross origin security:
SecurityError: Permission denied to access property "document" on cross-origin object
But that could just be the jsfiddle, can you put an alert('cmd button works'); just to make sure your button fires?

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?

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.

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 embeds
window.twttr.widgets.load();
} else if (!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:
Facebook FB.XFBML.parse
Twitter twttr.widgets.load
Instagram instgrm.Embeds.process

Over-riding alert() with iframe src

Here's a sample code:
HTML
<script> alert('This is alert!') </script>
JS
window.alert = function(data) //alert() over-riding
{
console.log("Alert over-ridden");
}
Issue:
HTML
<iframe src=javascript:alert('Iframealert')>
JS
window.alert = function(data) //alert() over-riding
{
console.log("Alert over-ridden"); //This doesn't execute - I mean, this over-ride function is not called when the above iframe alert is executed
}
I knew iframe in another document is not applicable for parent over-riding (due to same domain policy), but, the src JS execution happens only in the parent.
So, how do I over-ride alert() which is applicable to above iframe tag?
Update 1:
The HTML code is static, and I cannot make any modifications to it. I can only write some JS and append to the HTML.
Is there any way to over-ride the alert() of nested browsing window?

Nice question! The answer starts by looking at the rules for what happens when the src attribute is evaluated.
When this happens, the spec follows a number of steps during navigation. We end up step 14, which pertains to javascript: schemes.
Within that step, there are a series of sub-steps, one of which is:
Create a script, using script source as the script source, address as the script source URL, JavaScript as the scripting language, and the script settings object of the Window object of the active document of the browsing context being navigated.
The important thing here is "the Window object of the active document of the browsing context being navigated". Because you're navigating an <iframe>, you're actually dealing with a Nested Browsing Context, which has it's own window, so having overridden the parent window.alert makes no difference.
You can, however, override the alert of the inner window:
document.getElementById('myIframe').contentWindow.alert = function(msg) {
console.log('Overridden iframe: ' + msg);
}
This will only work for the javascript: scheme url presented to the src attribute, as at the time this code executes we were simply trying to get the address of the page to navigate the <iframe> to. When navigation actually occurs, a new Document object with it's own window is created in step 23 of the navigation steps, at which point you lose your overridden alert.
This also relies on setting the src attribute using JavaScript after you've overridden the alert, you can't use an inline src attribute on the element as the element needs to be in the page to get hold of it and it's contentWindow, and putting it in the page means the src will get evaluated.
Here's a fiddle demonstrating the overriding of the alert within the <iframe>'s src attribute.

JavaScript doesn't change iframe src (using Bootstrap frontend)

I am using the following JavaScript (in the script tag in head) to modify an iframe's src when a link is clicked.
function switchView() {
document.getElementById("project-view").src = 'projects/3dpool.html';
}
My iframe is written as
<iframe id="project-view" src="projects/fallingballs.html" onload="resizeIframe(this);" scrolling="no"></iframe>
The link that changes the iframe is:
3D Pool
Adding a log statement like document.getElementById("project-view").src after the src change shows that the src has actually changed but no changes show up.
I have tried removing the unload tag from the iframe but it doesn't help.
Typing out the code in the switchView() function in the web console works

Change your link to look like the following:
3D Pool

JavaScript to get some information from inside the HTML at an arbitrary URL?

Sorry, I'm don't know the right terminology to look this up by keyword...
So, as a simple newbie exercise, I tried to make a file "test.html" (just on my desktop) such that when I load it my browser and click the button that appears on the page, the article count from Wikipedia's main page will appear on the page under the button.
Somebody told me to try using an iframe, and I came up with this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"">
function get_count(){
var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
document.getElementById("put_number_here").innerHTML = articlecount;
}
</script>
</head>
<body>
<iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
<input type="button" onclick="get_count()" />
<p id="put_number_here"><p>
</body>
</html>
It doesn't work, and when I test this in the scratchpad (using Firefox 17), I get this:
var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
#Scratchpad:10
*/
(And alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); works perfectly on http://en.wikipedia.org/wiki/Main_Page directly, so I know that's not the problem. Copying the source of the wikipedia main page to a new file "test2.html", and setting that as the src of the iframe, that also works.)
Am I just trying to do this in completely the wrong way?

You cannot access any elements inside an iFrame unless, the iFrame is referring the same domain.
for same domain calls, use this link for reference :
Calling a parent window function from an iframe
for different domain, user this link for reference :
How do I implement Cross Domain URL Access from an Iframe using Javascript? script

You can reference the other frame by using:
window.frames["wiki_page"]
Then you can reference the element in the DOM by using:
window.frames["wiki_page"].document.getElementById ("articlecount");
So in your case you could try:
var targetFrame = window.frames["wiki_page"];
Then Access the elements using:
targetFrame.document.getElementById("IDOfSomething");
Make sure your iframe is still named wiki_page etc...