Run javascript function (execCommand('SaveAs'..) on an iframe - javascript

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myiframe')[0].document.execCommand('SaveAs',false,'somexml.xml');
});
</script>
</head>
<body>
<iframe id="myiframe" src="somexml.xml" frameborder="0"></iframe>
</body>
</html>
I know that execCommand only works in IE, but i cant get this to work. All I want is a "save as" dialog, with the iframe content beeing saved. So I want to run the function in the iframe, not on the "main" page.
Thanks

Try this:
var oIframe = $('#myiframe')[0];
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
oDoc.execCommand('SaveAs',false,'somexml.xml'); // this line will work only in IE
See this link for getting the document object of an iframe correctly: http://xkr.us/articles/dom/iframe-document/

Related

Chrome Cross Document Messaging Not working

I have following two pages and I am trying to send message from the main page to an iframe inside it. It is working correctly in IE 11 but not on Chrome. I don't see the pop-up or the console message in Chrome browser. The Chrome browser version is 60.0.3112.113.
HtmlPage1.html - http://localhost/Htmlpage1.html
<!DOCTYPE html>
<html id="root">
<head>
<meta charset="utf-8"/>
<title>Sheep</title>
</head>
<body id="b">
<iframe id="myFrame" src="http://localhost/HtmlPage2.html" height="200" width="300" seamless></iframe>
<script type="text/javascript">
"use strict";
window.addEventListener("DOMContentLoaded", function() {
var myFrame = window.document.getElementById("myFrame").contentWindow;
myFrame.postMessage("A cow", "*");
}, false);
</script>
</body>
</html>
HtmlPage2.html - http://localhost/Htmlpage2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drococile</title>
</head>
<body>
<h1>Fat Sheep :D</h1>
<script type="text/javascript">
window.addEventListener("message", function(event) {
alert(event.data);
console.log(event.data);
}, false);
</script>
</body>
</html>
Thanks
Easiest fix is to wait for the iframe to load
var myFrame = window.document.getElementById("myFrame");
myFrame.onload=function() {
myFrame.contentWindow.postMessage("A cow", "*");
};

<script> does not able to load another js file in the page

I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>

I can't get window.dialogArguments

I want to get window.dialogArguments from modal box but i cant do that :(
I want to display automatically dialogbox when parent-page is loaded. It is ok, when i display dialogbox with userEvent like click but when i display dialogbox when body/window onload, dialogArguments is undefined, Here is my simple code:
ParentPage:
<!DOCTYPE html>
<html>
<head>
<script>
function createDialogBox()
{
var dialogBox = showModalDialog("in1.html",{"name":"Lucas"})
}
</script>
</head>
<body onLoad="createDialogBox();">
Parent Page
</body>
</html>
DialogPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal dialog sample</title>
<script>
var arg = window.dialogArguments;
console.log(arg)// udefined! why?
</script>
<body>
DialogBox Page
</body>
</html>
Buy if i set eventHandler like onclick on the body everything is ok:
Parent Page:
<!DOCTYPE html>
<html>
<head>
<script>
function createDialogBox()
{
var dialogBox = showModalDialog("in1.html",{"name":"Lucas"})
}
</script>
</head>
<body>
Parent Page
<button onClick="createDialogBox()">Show Dialog Box</button>
</body>
</html>
Where is the problem?
In addition when i load dialog box body.onload, i get in firefox attention but if i load when i click the button attention not display.
I have firefox 49.

Using JavaScript to change local src of an HTML iframe

Lets say you have a main .html:
<!DOCTYPE html>
<html>
<head>
<title>Page One</title>
<script type="text/javascript" src="javaS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="main">
<h3>Test switching html content inside iframe</h3>
<p>iframe:</p>
<iframe src="" id="iframe1"></iframe>
</body>
</html>
And a secondary .html:
<!DOCTYPE html>
<html>
<head>
<title>Page two</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="test">
<h3>Test subject</h3>
<p>subjugate text</p>
</body>
</html>
How would you display the local second .html inside the iframe element of the first .html, using only JavaScript?
I have tried using these snippets:
window.onload = function() {window.frames['iframe1'].location.replace("Secondary.html");}
.
var iframe = document.getElementById('iframe1');
iframe.src = "second.html";
...But these haven't worked. I'm new at this so the answer might be fairly obvious, but any guidance would be very much appreciated!
I use this and it works well:
window.onload = function()
{
document.getElementById('iframe1').src = "Secondary.html";
}
document.getElementsByTagName("iframe")[0].setAttribute("src", "http://your-url.com");
Your second snippet is perfect. You just have to make sure that it runs when iframe DOM element exists - in window.onload.
I just combined the two exampples you had tried to make one working example, see here: https://jsfiddle.net/4p18mxg9/9/
var iframe = document.getElementById('iframe1');
window.onload = function() {
iframe.src = "second.html";
}

JS : How can iframe2 change the src of iframe1?

Here is my HTML source:
<body>
<iframe id='iframe1' src="http://site1.com/myScript.html"></iframe>
<iframe id='iframe2' src="http://site2.com"></iframe>
</body>
How can I (in myScript.html page) change the src of iframe ?
(or navigate to site3.com)
myScript.html;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function navigateIFrame2() {
// code to change the url or navigate iframe2
}
</script>
</body>
</html>
$('#iframe2', window.parent.document).attr("src" "new url");

Categories

Resources