Loading Highcharts in an iframe - javascript

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>

Related

XMLHttpRequest cannot load

I know this question has been asked many times , I have gone through all solutions but could not solve the issue.
I am new to programming and want to make a page that load some content in a div with id "content" through java script.
This is my index page
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
home
about
<div id="content">
<script src="loader.js"></script>
</div>
</body>
</html>
and this is my loader.js
$(document).ready(function() {
$('#content').load('home.html');
});
when I run index.html i get
jquery-3.1.1.js:9536 XMLHttpRequest cannot load file:///C:/Users/Desktop/my_folder/home.html.
all the files are in same folder named my_folder.
Unfortunately XMLHttpRequest can not be called to local resources, EVEN IF the HTML ist stored locally.
Its because you can programatically read the contents of local files and send them into the web, what is not allowed.
i have found the answer of my question
i have changed my script to
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
return false;
}
and call this function in content div
thanks for the help :)

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(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.

document.ready function is not working inside an iframe

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>

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>

Categories

Resources