document.ready function is not working inside an iframe - javascript

In the parent page I have an iframe like this:
<iframe src="facts.php" style="width:320px; height:500px; border:hidden" id="facts"> </iframe>
And inside of that iframe I have a jQuery function like this,
<script type="text/javascript">
$(document).ready(function(){
$('#demo').hide();
$('.vticker').easyTicker();
});
</script>
But this function doesn't trigger when the parent page is loaded. Can you please explain me how to solve this?

Try this inside your iframe.
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#demo').hide();
$('.vticker').easyTicker();
});
</script>
You are facing this issue because the parent JavaScript cannot access the events inside the iframe. You better include the script inside the source of the iframe.

This seems like cross side scripting to me.
First of all try this in your iframe:
<script>
$(document).ready(function()
{
alert("iFrame is ready");
});
</script>
If this does not work, check if you includet jQuery the right way.
Remember: your iframe is a complete selfstanding webside. There is no communication between your main frame and your iframe.
That means if you use Javascript in your iframe you can only manipulate HTML-code inside the iframe.
If you want to manipulate HTML-elements outside of the iframe you need to include the Javascript in your main frame.

i was facing the same issue. i was using relative path to add jQuery file.
<script type="text/javascript" src="js/Jquery.js"></script>
by adding '/' it solved my issue.
<script type="text/javascript" src="/js/Jquery.js"></script>

Related

Loading Highcharts in an iframe

I'm trying to load a chart (using Highcharts) in an iframe, I load highcharts but the console returns $(...).highcharts is not a function
$('<iframe id="panel_frame_container" frameborder="0"/>').load(function(){
$('#panel_frame_container').contents().find('body').append("<div id='panel_chart_container'></div>").end()
.find('body').append('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"><\/script>').end()
.find('body').append('<script src="https://code.highcharts.com/highcharts.js"><\/script>').end()
.find('body').append('<script src="https://code.highcharts.com/highcharts-more.js"><\/script>').end()
.find('body').append('<script src="https://code.highcharts.com/modules/exporting.js"><\/script>').end()
.find('body').append("<script type='text/javascript'>$(document).ready(function(){console.log('loaded');$('#panel_chart_container').highcharts("+data2+");});<\/script>");
}).appendTo($(".panel-body"));
https://jsfiddle.net/s82v657e/
My goal is to let the user set is own datas (data2) so I choose an iframe to lock him out of my main window since he can use functions in highcharts, so I'll probably add some sandbox tag in my iframe when the first part will work.
I think you should not inject yours scripts with javascript like that.
Instead create a dynamic page like iframe.php with all your content it will be much easier.
Iframes have restricted rights and the way you load yours scripts doesn't guarantee you they will be done one after another
Quick example for the iframe.php content, just pass the data_id inside the iframe URL:
<?php
if (isset($_GET['data_id']))
$data = getGraphics( $_GET['data_id']);
?>
<html>
<head>
</head>
<body>
<div id="panel_chart_container"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#panel_chart_container').highcharts(<?=$data;?>);
});
</script>
</body>
</html>

JavaScript code in iframe

I need to run JavaScript code in iframe. But script with id "us" loaded after creating iframe. How to run this javascript in iframe?
<iframe id="preview">
#document
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$("#preview").ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test"></div>
</body>
</html>
</iframe>
Thanks in advance.
The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.
Example: http://jsfiddle.net/ZTJUB/
// Since this is page you wait until it's loaded
$(function() {
$(".test").click(function() {
alert(true);
});
});
The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"
As per my comments above, you should attach to the iframe's document.ready, like this:
// Since this is page you wait until it's loaded
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
EDIT:
Just realizing you are probably having an entirely different issue here - Html code as IFRAME source rather than a URL - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test">test</div>
</body>
</html>
</iframe>
</body>
</html>
if you render that page in firefox, and then inspect the source in firebug, you'll see:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
This is happening because the browser isn't expecting to see the code inline between the iframe tags.
Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content IN your iframe FROM your parent page. Since the other answer should work fine if trying to run it from within the iframe.
On the parent page try something like:
$(function() {
$("#preview").load(function ()
$("#preview").contents().find(".test").click(function() {alert(true);});
});
});
*This assumes both parent and iframe are on the same domain.

Convert embedded JavaScript into ajax call

I am currently embedding a third-party javascript file directly on my page.
However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.
I'm currently embedding it on my page on the spot where it will write some values:
<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>
The response from the embedded script is just some JavaScript:
document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');
I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.
Is there be a better approach?
You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.
<div id="hiddenElement">
<script type="text/javascript" src="[third-party site/file.js]"></script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#hiddenElement").appendTo("#someOtherElement");
});
</script>
</body>
Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and #James McDonnell said.
$(document).read(function()
{
$.getScript(/* src */)
});
This will run after the page has loaded.
$.getScript()
Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.
<html>
<head>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button_test').click(function() {
$('.value').html('New stuff').change();
});
$('.value').change(function(){
$('div').each(function() {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>

Background-color not changing by jQuery

I have jQuery on my webpage.
I am changing background color of a div.
Its not working.
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});​
</script>
Your code should work, try using document ready handler.
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
})
http://jsfiddle.net/WcQse/
Its possible your script is running before the DOM has loaded. Try:
<script type="text/javascript">
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
});
</script>
-- Demo --
Try this
If you are using ASP.NET then your Client ID might change depending on the use of Master Pages in that case you can try something like this.
$('#<%= gridbox.ClientID %>' ).css('background-color','black');​
If it is just a div then you should wrap it in document.ready() method
$(document).ready(function(){
$('#gridbox').css('background-color','black');
});
Demo
The same code that you are using is working fine for me
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="gridbox" style="background-color:red;">gridbox</div>
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});
</script>
</body>
</html>
so you should first include the jquery library, then put the javascript file after the div that you want to change the background color.
Try:
$("#gridbox").css("background-color", "black");
Edit:
Add a document ready function, this will execute the css change after the DOM has loaded.
$(document).ready(function() {
$("#gridbox").css("background-color", "black");
});
Note: Ensure you have the jQuery JavaScript file referenced in the page.

Old functions return 'undefined' error once I add a jquery reference

Disregard this question: I've simply confused <script src="..."></script> tag and <script> [some functions] </scipt> tags.
I have this function
function OnLoad()
{
ShowHideConfirmAnswers();
return true;
}
triggered by onload event:
<body onload=OnLoad()>
It works fine until I add src="jquery-1.4.2.js" to the script element. From this moment I get "OnLoad is not defined" error, and the same happens to every other javascript function.
It works fine until I add src="jquery-1.4.2.js" to the script element.
This line makes me think you're using a script element like this:
<script type="text/javascript">
//... all code here
</script>
And then you're adding the src attribute to the element:
<script type="text/javascript" src="jquery-1.4.2.js">
//... all code here
</script>
Which won't work. Once you add the src attribute to a <script> element, all data contained within the script element will be completely ignored by the browser. You have to use separate script tags for external and inline javascript:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//... all code here
</script>
What happens if you change the OnLoad call to this script block ?
$(document).ready(function(){
ShowHideConfirmAnswers();
}
And just remove the OnLoad="" block from the Html.

Categories

Resources