i am currently having problem including image in frame from another file, what i am doing is creating a html page with two frame having code :
<html>
<frameset cols="20%,80%">
<frame src="aa.html" id="1">
<frame src="" id="2">
</frameset>
</html>
Then, in aa.html there are three links and on clicking the first link an image should open in frame with id="2".
aa.html
<html>
<head>
<link rel="import" href="cook.html">
<script>
function fun1()
{
document.getElementById('2').src="b.html";
}
</script>
</head>
<body>
Home1
Hom2
Home3
</body>
</html>
then b.html shows image in the frame,like this :
<html>
<head>
</head>
<body>
<img src="ima.png"/>
</body>
</html>
But this does not work.thanks in advance.
You can't do what you want in this way.
This function:
function fun1() {
document.getElementById('2').src="b.html";
}
is working IN IFRAME, and not in MAIN WINDOW.
Try look at window.postMessage methods.
UPDATE working with window.postMessage look like that:
1) in child window will be function
function fun1() {
window.postMessage(JSON.stringify({"id":2,"src":"b.html"}),'http://parent.window.com');
}
2) in parent window, you should listen for this event, so add on start of page:
window.addEventListener("message", receiveMessage, false);
function receiveMessage( event )
{
if (event.origin !== "http://example.org:8080")
return;
try{
var data = JSON.parse(event.data);
if( data.id != undefined && data.src != undefined ){
document.getElementById(data.id).src = data.src;
}
} catch( exception ){ console.log( exception);}
}
Related
I want an audio file to play automatically when a web page loads. I've tried the following simple code but for some reason it's not working. Any thoughts? I understand this may be caused by some default behavior of Google Chrome. Thanks.
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
const audio = new Audio("wonderful.mp3");
audio.play();
}
</script>
</body>
</html>
Simply you can't.
Browsers don't allow you to play audio when the user has not interacted with your site at least once.
You should create a simple function that, when the user click for the first time on your page, play your audio.
Error : Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
This snippet allows you to play your audio when the user click on your document for the first time :
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<div>Test</div>
<audio id="my-audio" autoplay
src="https://file-examples.com/storage/fe8bd9dfd063066d39cfd5a/2017/11/file_example_MP3_5MG.mp3"></audio>
<script type="text/javascript">
var isAudioPlayed = false;
function playAudio() {
isAudioPlayed = true;
const myAudio = document.getElementById("my-audio");
myAudio.play();
}
document.body.onclick = ()=>{
if(isAudioPlayed) return ;
playAudio();
}
/*
window.onload = () => {
const myAudio = document.getElementById("my-audio");
console.log(myAudio);
myAudio.addEventListener('canplay', (event) => {
console.log("CnPlay",event)
event.target.play()
})
}
*/
</script>
</body>
</html>
Else you can use canplay event
I'm trying to find a way to detect that child window has opened a specific URL ?
<html>
<head>
<script type="text/javascript">
function openWin()
{
var child=window.open("https://www.google.com/search?q=bing");
var timer = setInterval(checkChild, 100);
function checkChild() {
var urll = child.location;
if (urll.match(/bing.com.*/)) {
alert("bing opened")
}
if (child.closed) {
alert("Child window closed");
clearInterval(timer);
}
}
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
User opens https://www.google.com/search?q=bing in child window and click on search result and go to bing.com.
How can i find out that child window's URL is LIKE to bing.com ?
is it possible generally to do that? or i'm wasting my time?
if it is imposible , is there any other way?
For some reason, this page won't go to the mobile or desktop page when I use it! Here is the code:
<html>
<head>
<title>Loading...</title>
</head>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
</script>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
Sorry, this is my first time on Stack Overflow, so I'm not familiar with some stuff. Thanks.
You are missing the closing } for onload function. Update code to following.
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
You have missing } . so its not working. You have missed } for the window.onload = function() { //your code goes here }
Please check running code here
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
<html>
<head>
<title>Loading...</title>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
2 problems:
You've put your script element in the wrong place, in the middle of nowhere. The script tag must be under body or head and nothing else. As said at W3: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
You also missed a } on your onload function:
<html>
<head>
<title>Loading...</title>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
So I have an iframe that's supposed to hold the rendered code from a textarea once a button is pressed, but I'm not sure how to do this in javascript or jquery. I'm aware of how to send a specific site with a URL to display inside a webpage, but for some reason when I try to render the textarea and send it to the iframe, it doesn't work.
this is my iframe:
<iframe id="outputIframe"></iframe>
this is the function I wrote to send contents from textarea editor (this works just fine with a but not with ):
function openIframe() {
var e = document.getElementById('outputIframe');
var editorHTML = editor.getValue();
e.document.innerHTML = editorHTML;
}
So the editor (codemirror) holds the HTML code which users write, and then it should output in the 'outputIframe' iframe element when users press a button. This is similar to the "Try it" sections of w3schools.
function openIframe() {
var editorHTML = editor.getValue();
var iframe = document.getElementById('outputIframe');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(editorHTML);
iframe.contentWindow.document.close();
}
http://jsfiddle.net/tintucraju/2Lsr9ju9/
Using jquery you can type:
$("iframe").contents().find("body").html(yourHTML);
Important to say, this only works if iframe and your parent window are on the same domain, by security reasons.
This will do the trick - just keep in mind that different browsers will accept different maximum lengths of dataURL.
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}
function allByClass(className){return document.getElementsByClassName(className);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(elem, className){elem.classList.toggle(className);}
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)}
function hasClass(elem, className){return elem.classList.contains(className);}
function addClass(elem, className){return elem.classList.add(className);}
function removeClass(elem, className){return elem.classList.remove(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
byId('displayBtn').addEventListener('click', onDisplayBtn, false);
}
function onDisplayBtn()
{
var rawInput = byId('htmlInput').value;
var base64Output = "data:text/html;base64," + btoa(rawInput);
byId('htmlOutput').src = base64Output;
}
</script>
<style>
</style>
</head>
<body>
<textarea id="htmlInput" style="width: 462px; height: 185px;"></textarea>
<hr>
<button id='displayBtn'>Display</button>
<br>
<iframe id='htmlOutput' style="width: 462px;"></iframe>
</body>
</html>
I have a pdf associated with a button . When i click the button i want to get the pdf printed. This is how my button is coded :
<input type="submit" class="btn-red" value="Print"
name="Submit" id="printbtn"
onclick="printPDF('http://www.irs.gov/pub/irs-pdf/fw4.pdf')" />
Now my print functionality works like this :
function printPDF(pdfUrl)
{
if ((navigator.appName == 'Microsoft Internet Explorer') )
window.print(pdfUrl,"_self");
else
{
var w = window.open(pdfUrl,"_self");
w.print();
w.close();
}
}
The problem is , it's working fine in IE and Fire fox , but does not work in chrome. In ie and Firefox, it opens up the xps printer option, but in chrome , it just opens up a new print window, with the print preview of the div and not the pdf . But i want the xps option to be opened up here.
EDIT : In chrome when i try to print , only the html element comes as preview and not the pdf. I am using chrome version : 20.0.1132.57
How can i get around this peculiarity ? kindly help .
This worked for me and didn't require a host HTML file. The key was to wait for onload:
For a link like this:
<a class="print-pdf-link" href="/your/pdf.pdf">Print PDF</a>
I used javascript:
$('a.print-pdf-link').click(function () {
var w = window.open($(this).attr('href'));
w.onload = function () {
w.print();
};
return false;
});
I had to do the same thing and I used a different approach, one that for me worked in both Chrome and Firefox.
My solution involved a print.html helper file, that received the PDF file's url as a GET type parameter, then loaded the pdf inside an iframe. Then it kept checking to see if the pdf had completely loaded (binding the check to the onload event did not work) and on completion it triggered the print method.
Here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Print Page</title>
<meta name="title" content="Print" />
<script>
(function (window, document, undefined) {
var printy = {
urlGET: function (param) {
var params = document.URL.split('?');
if(params.length > 1) {
params = params[1].split('&');
for (var i = 0, len = params.length; i < len; i++) {
if (params[i].split('=')[0] === param) {
return params[i].split('=')[1];
}
}
}
return null;
},
init: function () {
var self = this;
window.onload = function () {
var src = self.urlGET('path');
//creating an iframe element
var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
// making the iframe fill the viewport
ifr.width = '100%';
ifr.height = window.innerHeight;
// continuously checking to see if the pdf file has been loaded
self.interval = setInterval(function () {
if (ifr.contentDocument.readyState === 'complete') {
clearInterval(self.interval);
// doing the actual printing
ifr.contentWindow.print();
}
}, 100);
ifr.src = src;
}
}
}
printy.init();
})(window, document, undefined);
</script>
</head>
<body>
</body>
</html>
This solution is not tested on IE though. We use Macs at work so it was not an option.
In order to do the printing, I use it by calling an URL like this: http://example.com/print.html?path=docs/myfile.pdf