The following code keeps showing a blank page.
I tried 2 different ways.
It seems that either the function doesn't get called or that the frame doesn't get updated.
What is wrong?
Thx.
<html>
<head>
<script type="text/javascript">
var links = [];
links[0] = "http://www.cbs.com";
links[1] = "http://www.nbc.com";
links[2] = "http://www.cnn.com";
var x = 0;
var delay = 3000;
changeLink();
function changeLink()
{
document.getElementById("report").source = links[x];
// parent.report.location = links[x];
x = x + 1;
if( x > 2) { x = 0;}
setTimeout(function() { changeLink() }, delay);
}
</script>
<title>Report</title>
<body>
<frameset border="0" frameborder="0">
<frame name="report" id="report" src="#" frameborder="0" scrolling="no">
</frameset>
</body>
</head>
</html>
change this line
document.getElementById("report").source = links[x];
to
document.getElementById("report").src = links[x];
Also Don't use frameset and frames, use iframe instead
<iframe name="report" id="report" src="#">
also add this changeLink(); method call inside window load event
window.onload = function(){
changeLink();
};
Related
I want to print a PDF manually.
I tried the iframes way, but showing me cross-origin issues. To resolve this I tried:
function printIframe(url) {
var proxyIframe = document.createElement('iframe');
var body = document.getElementsByTagName('body')[0];
body.appendChild(proxyIframe);
proxyIframe.style.width = '100%';
proxyIframe.style.height = '100%';
proxyIframe.style.display = 'none';
var contentWindow = proxyIframe.contentWindow;
contentWindow.document.open();
contentWindow.document.write('<iframe src="' + url + '" onload="print();" width="1000" height="1800" frameborder="0" marginheight="0" marginwidth="0">');
contentWindow.document.close();
}
<button type="button" onclick="printIframe('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf')">Print</button>
And the above code is opening a print window, but the content is empty.
The other method I tried is:
<a href="javascript: w=window.open('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'); w.print();" >PRINT</a>
This will open the page for me, but won't open the print dialog.
Please let me know any feasible solution that works here.
Thanks.
Use
<embed>
tag to embed a pdf inside a document
Create a HTML file and copy paste the below code, it worked well for me
<head>
<style>
</style>
</head>
<body>
<embed
type="application/pdf"
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
id="pdfDocument"
width="100%"
height="100%" />
<script type="text/javascript">
function printDocument(documentId) {
var doc = document.getElementById(documentId);
//Wait until PDF is ready to print
if (typeof doc.print === 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
doc.print();
}
}
document.getElementById("pdfDocument").onload = function(){
printDocument("pdfDocument");
}
</script>
</body>
I am wondering if is possible to close the htmlservice popup when the submit button is hit on the Google form:
function launchForm() {
var form = FormApp.openById('15Qw9jmolybvMbx2d3UhddEWHrKe0zBiV5_asKXolsM0');
var formUrl = form.getPublishedUrl();
// var response = UrlFetchApp.fetch(formUrl);
// var formHtml = response.getContentText();
var htmlApp = HtmlService
.createHtmlOutput('<h1>Your Organization</h1>')
.append('<iframe src ="' + formUrl + '?embedded=true" width="1000" height="900" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>')
.setTitle('Form')
.setWidth(1000)
.setHeight(1000);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
I'm hoping that when I hit the submit button on the form, the html app will close.
Google forms load each page on form navigation or submit. You can listen to those events, count the number of page loads and close the pop up.
Sample:
code.gs:
function showGoogleForm() {
var form = FormApp.openById(/*FORM EDIT ID*/);
var formUrl = form.getPublishedUrl();
var temp = HtmlService.createTemplateFromFile('googleForm');
temp.pubUrl = formUrl;
var htmlApp = temp
.evaluate()
.setTitle('Form')
.setWidth(1000)
.setHeight(1000);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
googleForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var i = 0;
var totalSections = 1; //TODO Set Total number of pages in your form
check = () => {
if (++i > totalSections) {
alert('Thank You for filling up the form');
setTimeout(google.script.host.close, 7);
}
};
</script>
</head>
<body>
<h1>
MASTER FORM
</h1>
<iframe
onload="check()"
referrerpolicy="no-referrer"
sandbox="allow-scripts allow-forms"
src="<?=pubUrl?>?embedded=true"
width="700"
height="520"
frameborder="0"
marginheight="0"
marginwidth="0"
></iframe>
</body>
</html>
Want to check whether the body element is empty in a iframe area which generated by Google Ad. Here is what I have tried and the result retuned. It not works well. Maybe the method is not right.
<iframe id='abc' scrolling="no" marginwidth="0" marginheight="0" frameborder="0" data-load-complete="true">
#document
<html>
<head></head>
<body>
<scirpt>...</script>
<scirpt>...</script>
<div>...</div>
</body>
</html>
</iframe>
var iframe = document.getElementById("abc");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
alert(iframeDocument.getElementsByTagName("body"));
// It printed: [object HTMLCollection]
alert(iframeDocument.getElementsByTagName("body").item(0).innerHTML);
// It printed: "". But here it isn't empty.
To check if an html element has children you could use the HTML DOM children property or the childNodes property:
Here's a general example from W3Schools:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the tag names of the body element's children.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.children;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].tagName + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
alert(iframeDocument.getElementsByTagName("body").childNodes
I have inserted a HTML page into an iframe:
<iframe src="file:///C:/editor.html" width="1000" height="500" frameborder="0"></iframe>
Now I need to access to the DOM from the iframe and get an element by id.
This is my editor.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
<!-- I use many resources -->
<script>
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png";
var sResultBlob = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
}
}, "image/png", oImageOptions);
return sResult;
}
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
I need to access the DOM from the iframe, and get image.src from my edtior.html. How can I do this?
Use window.parent or window.top to access the parent/primary frame window. Then you can get their elements with
window.parent.document.getElementById("id")
and so on.
So you can have in iframe.html:
<html><body>
<script>
var getDiv = function(){
return window.parent.document.getElementById("test");
}
</script>
</body></html>
And a page containing it:
<html><body>
<div id="test"></div>
<iframe src="#####/iframe.html"></iframe>
</html></body>
Now calling getDiv() inside the iframe will fetch you the div[id=test] inside the parent frame.
If you want to do the opposite, i.e. access an element inside an iframe from outside the iframe, please read this answer:
Javascript - Get element from within an iFrame
I have a function that i need to call on iframe mousemove(). But i didnt found anything like we have in body tag
We have <body mousemove="Function()"> Do we have anything like this for iframe??
The iframe contains its own document, own body element etc.
Try something like this:
var frame = document.getElementById("yourIframeId");
// IE is special
var frameDoc = frame.contentDocument || frame.contentWindow.document;
var frameBody = frameDoc.getElementsByTagName("body")[0];
var testingOneTwo = function() {
console.log("Hello, is this thing on?");
};
frameBody.onmouseover = testingOneTwo;
Did you mean onMouseOver or onFocus?
e.g.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function SayHello()
{
alert("Hi from IFrame");
}
//-->
</script>
</HEAD>
<BODY>
<iframe id="myiFrame" onMouseOver="SayHello()"/>
<iframe id="myiFrame" onFocus="SayHello()"/>
</BODY>
</HTML>