I have a page that has a cross-domain iframe. On the page loaded in the iframe is a print button that runs some javascript to print an iframe named printFrame sitting on the page (on the nested page, not on the parent page). When I click on the button, in FF it works but IE gives me an error: frames.printFrame is null or not an object. I'm confused. The code is not trying to access the parent document, why isn't it working?
The code crashes on line 9 of iframedoc.html, when I try to access the printframe
Parent document HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<iframe src="http://www.otherdomain.com/iframeDoc.html"/>
</body>
</html>
iframedoc.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function printContent(){
frames['printFrame'].focus();
var printFrameDiv = frames['printFrame'].document.getElementById("printDiv");
printFrameDiv.innerHTML = document.getElementById('printableContent').innerHTML;
frames['printFrame'].print();
window.focus();
}
</script>
</head>
<body>
<iframe id="printFrame" name="printFrame" src="/printFrame.html"></iframe>
<div id="mainContent">
<div id="printableContent">
My printable content is here
</div>
<div id="nonPrintableContent">
Content that I dont want to print is here
</div>
Print
</body>
</html>
Related
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
I have a new project where I should implement a new application in an existing system. Users will be able to access my app through an existing login page. Once they log in I will have all information available in my session variables. Link for my app is available for the users based on their credentials. Now I want to organize my home page. My question is should I use iframe to be my home page? Should I place everything else inside of the iframe? I don't have experience working with iframes and I'm not sure if this is the best option. Here is example of what I have:
<iframe src="Home.cfm" name="homeFrame" id="homeframe" frameborder="0" scrolling="no"></iframe>
Here is my Home.cfm page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script src="JQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mainpage">
</div>
</body>
</html>
Also i have included JQuery on my home page. I might have two more pages in this app. Is that the best place to include the library? Or that should be included on each page in the app?
If you add it in home page that is enough.Try like below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script src="JQuery/jquery-3.2.1.min.js"></script>
<script src="default.js"></script>
</head>
<body>
<div class="mainpage">
//whatever you have already in this page.Using iframe you can display a separate document, including scrollbars and borders.
<iframe src="Home.cfm" name="homeFrame" id="homeframe" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
default.js:
$(function(){
alert('success');
//your stuff
});
I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.
I have a index.html page, which contains a buttonid="my-btn"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/jquery-1.5.1.js"></script>
<script src="js/my.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be popped up with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/jquery-1.5.1.js"></script>
<script src="js/test.js"></script>
</body>
</html>
Every thing is working fine in FireFox, but I got problem in IE 7.
In IE 7, when my-btn is clicked, the new window is not popped up, instead, I got error message "Invalid argument" which is point to my js code window.open('test.html', 'testwindow');, how to make it working in IE then???
Try window.open('test.html',''); (according to this question/answer ie8 var w= window.open() - "Message: Invalid argument.")
Read this.. The problem lies with you second argument..
I using parent window and one iframe my html code is given below
Page1.html
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<a name="logo" href="Page2.html">dsd</a><br/>
ttttttbr/>
rrrrr<br/>
rrrrr<br/>
rrrrr<br/>
rrrrr<br/>
rrrrr<br/>
rrrrr<br/>
<iframe name="I1" src="Page3.html">Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</body>
</html>
Page3.html
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
dsd<br/>
</body>
</html>
If i click the link in side iframe, open the page2.html in side iframe and move to the top of the page of parent window together.
How i can do this ?
hoping ur support
Alex
I think this can't be done using pure HTML. You would need JavaScript for that, something like this:
<a href="Page2.html" onclick="parent.location.href='#'">