I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its src attribute.
Related
I'm creating eLearning content in an application called MadCap Flare.
I'm trying to get the intro bumper video to play and then after the video is done it moves on to another page (we will say url for this forum).
Here is my code, and I cannot get this to work at all. The video plays but it will not move on to the url. When I view source code I see it put in a CDAT error.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
You forgot to add the id attribute to the video tag. Try this :
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video id="video1" MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
Why is the following page un-printable on google chrome? JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
If you can't replicate the issue, I am using Google Chrome 55.0.2883.95 (Official Build) (64-bit), and my screen size is 1920x1080
Even more interesting, it still can't print when you have display: none set. JSFiddle
<!doctype html>
<html>
<head></head>
<body>
<iframe id="f" src="http://placehold.it/350x1500?q=1" style="display: none"></iframe>
<script>
window.addEventListener("resize",function () {
var f = document.querySelector("#f");
f.src = f.src+"1";
f.style.height="2000px";
});
</script>
</body>
</html>
Update
The f.style.height is not necessary, the main issue is the iframe src change (a widget needs a size parameter in its location)
It's something to do with your resize handler. If you remove that code, it works fine. I believe you can accomplish what you're looking for in a CSS media query instead:
<iframe id="f" src="https://placehold.it/350x1500?q=1"></iframe>
#media print {
#f { height: 2000px }
}
https://jsfiddle.net/7x9sdf79/1/
What is the jQuery selector I need to access username from within main.html? The alert should say "Bob".
main.html
<head>
<script>
alert(username); // *** not working ***
</script>
</head>
<frameset>
<frame name="left" src="left.html">
<frameset>
<frame name="top" src="top.html">
<frame name="right" src="right.html">
</frameset>
</frameset>
right.html
<head>
<script>
var username = 'Bob';
</script>
</head>
Use the contentWindow property.
Example:
document.getElementById('frame_id').contentWindow.$('#' + idOfElementInFrame);
Note: this works for iframe tags. It should work for frame tags as well, but given that the frame tag is deprecated, you could have issues.
There is an example:
(1)mainpage:
<html>
<script>
function show(){
var winleft = window.frames["left"];
alert(winleft.username);
}
</script>
<frameset cols="25%,50%,25%">
<frame src="left.html" name="left">
<frame src="left.html" name="middle">
<frame src="left.html" name="right">
</frameset>
</html>
(2)left.html
<head>
<script>
var username = 'Bob';
</script>
</head>
(3)why?
Every frame has its own Object "window",
you should get the "window" object of the frame["left"],and the variable "username" is the proterty of the frame["left"]'s window(winleft) object.so,you can get the value of username.
I dynamically create a pdf in a iframe:
<iframe name="output" id="output"></iframe>
and try to print from it:
window.frames["output"].focus();
window.frames["output"].print();
But how you can see in this example:
http://jsfiddle.net/FEvq6/78/
It prints a blank site.
It prints blank page because you're printing the iframe itself. Here is what you should do:
1. The iframe should contain EMBED tag which will load the PDF (for some reason stack overflow did not formatted code well, please see paste bin link below):
< embed src="path_to_script_which_generates.pdf" type="application/pdf" id="pdf"
width="100%" height="100%">
< /embed>
2. Then you should call the EMBED object to print the document. But since it may require some time for it to load you would need a timeout:
var doPrinting = (id){
var pdfObject = document.getElementById(id);
if (typeof(pdfObject.print) === 'undefined') {
setTimeout(function(){ doPrinting(id); }, 1000);
} else {
pdfObject.print();
}
}
doPrinting('pdf');
Here is paste bin of the above: http://pastebin.com/s6qSTE8t
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<strike>funny</strike>.
<iframe src="file_to_print.pdf" class="frameSet" type="application/pdf" runat="server" name="I5" scrolling="yes" width="100%" height="400"> </iframe>
</body>
</html>
Can you tell me how we can change a frame size on mouse over?
eg:
<html>
<frameset rows="70%,30%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>
On mouse over it should become like this:
<frameset rows="40%,60%">
And also is there any way we can do like this?
<frameset rows="40%,60%"> ---> <frameset rows="70%,30%"> ---> <frameset rows="40%,60%">
(after loading webpage; (after 5 seconds) (on mouse over)
for 5 seconds)
CODE:
<html>
<head>
<script>
var already=false;
var frameset;
window.onload=function(){frameset=document.getElementById("foo");};
setTimeout(modify,5000);
function modify()
{
already=true;
frameset.setAttribute("rows","70%,30%");
}
function big()
{
if(already)frameset.setAttribute("rows","70%,30%");
}
function small()
{
if(already)frameset.setAttribute("rows","40%,60%");
}
</script>
</head>
<frameset rows="40%,60%" id="foo" >
<frame src="page1.htm">
<frame src="page2.htm" onmouseover="small();" onmouseout="big();">
</frameset>
</html>
You can use JQUERY to change frame Size. there is a effect Animation already defined in it.
Its very easy to do with it.