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.
Related
if i have the following html file like index.html
<html>
<body>
<div>
<p>Sample html</p>
</div>
</body>
</html>
and consider i have another html page named example.html
before loading the index.html i need to load this example.html as a popup. how is it possible
Just write the following code in index.html file
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body onload="myFunction()">
index Page
<script>
function myFunction(){
var myWindow = window.open("example.html", "", "width=700,height=500");
}
</script>
</body>
</html>
And create an another html file called example.html in the same directory. Whenever open the index.html page the example.html file will open itself in a popup window
It's better to put your example.html codes inside the div tags for responsiveness and clean instead of iframe but here I used iframe for your question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<iframe src='example.html' width='600' height='350'> </iframe>
</div>
</body>
</html>
Reference link : http://jqueryui.com/dialog/
Can someone tell me why the following line works from the dev tool console but does not work in the page, I keep getting length as 0
$("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
This is the page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-3.1.1.js"></script>
<script>
$(function () {
submitThis();
function submitThis() {
var a = $("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
console.log(a);
}
})
</script>
</head>
<body>
<iframe name="gridFrame" src="temp-iframe-test.html">
</iframe>
</body>
</html>
And this is the iframe file:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="grid">
<input id="fname" />
</form>
</body>
</html>
your submitThis() function is firing before your iframe has loaded its source. That is why you see a length of 0.
Try adding:
onload="submitThis()" to your iframe element and moving your submitThis function into global scope (out of the $ function).
When using the dev console, your iframe has since loaded its file.
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 write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.