I am completely new to javascript and would like to show and refresh RSS feed in a web page. I managed to show it in the page but I have problem refreshing the feed.
I tried the suggestions from this forum using setinterval and settimeout together with head.appendChild but did not work. They do not refresh the page.
I also tried "location.reload" function, which refreshes the page but shows blank page after the refresh. The same with metadata refresh in HTML.
I will be really grateful if someone can suggest a solution. My latest code is below which shows the feed in the page but does not refresh.
Edit: I may also need to add that the page I am showing the results are inside a PowerBI dasboard (web content tile). It is similar to w3schools trial windows. I could not refresh the results in any of them.
Thanks,
<!doctype html>
<html>
<head>
</head>
<body>
<script type = "text/JavaScript">
function load_js()
{
var versionUpdate = (new Date()).getTime();
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type = "text/javascript";
script.src= '//rss.bloople.net/?url=http%3A%2F%2Frss.cnn.com%2Frss%2Fcnn_latest.rss&detail=-1&limit=10&showtitle=false&type=js'+
versionUpdate;
head.appendChild(script);
script.remove;
}
load_js();
setInterval(function(){
load_js();
}, 3000);
</script>
</body>
</html>
Since you're creating the <script> tag on every iteration, you won't be able to update te source.
Consider remembering the <script> to update the src;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type = "text/JavaScript">
this.tag = document.createElement('script');
function load_js() {
console.log('load_js()');
var versionUpdate = (new Date()).getTime();
var head= document.getElementsByTagName('head')[0];
this.tag.type = "text/javascript";
this.tag.src= '//rss.bloople.net/?url=http%3A%2F%2Frss.cnn.com%2Frss%2Fcnn_latest.rss&detail=-1&limit=10&showtitle=false&type=js'+ versionUpdate;
head.appendChild(this.tag);
this.tag.remove;
}
load_js();
setInterval(function(){
load_js();
}, 3000);
</script>
</body>
</html>
I've tested this in a w3schools trial windows and the versionUpdate is updated on each iteration.
JsBIN Demo
Related
We have a Line it! share button on our page, it is blocking loading of our own resources with is causing a big performance issue.
With the implementation of the Line Share button proposed by line.me their line-button.js script needs to be included in the middle of the page, where ever the button should be shown. The button replaces the <script> element from where it's initiated:
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"en","type":"b"});
</script>
I can add the line-button.js script to the page after our own have completed:
function includeLine(callback) {
var script = document.createElement('script');
script.async = true;
script.onload = callback;
script.src = "//media.line.me/js/line-button.js?v=20140411";
document.body.appendChild(script);
}
Then I can inject the script element like this:
function initLine() {
var
script = document.createElement('script'),
line = ['new media_line_me.LineButton({"pc":false,"lang":"'];
line.push(util.getLang());
line.push('","type":"b"});');
script.text = line.join('');
publ.$elements.shareLine.append(script);
};
But in line-button.js media_line_me.LineButton attaches a listener to the window.onload event, which by this time has already happened.
I really want to make sure that everything else is done before any social media widgets start to load. But right now I'm kind of out of ideas.
Is there another solution to this that's not loading the JS file as text, rewriting it in our script and then eval() it?
Here is your perfect answer
dynamic LINE share button
Github -- naver LINE dynamic share button
Dynamic share button adds:
css class for both <a> and <img>
All options are now meta properties
loads async, no interaction needed!!
Example usage
<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta name="naver-line-selector" content="" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="http://www.google.com" />
<meta property="og:title" content="Dynamic Share button 0" />
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function() {
$('meta[property="og\\:url"]').attr('content', 'https://www.google.com');
$('meta[property="og\\:title"]').attr('content', 'Lets exchange LINE');
$('meta[property="og\\:locale"]').attr('content', 'en_US');
$('meta[name="naver-line-selector"]').attr('content', '#after-this');
(function(d) {
var po = d.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'naver-LINE-share-button.js?v=20140411';
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})(document);
});
</script>
</head>
<body>
<div id="after-this"></div>
</body>
</html>
Please note, implementation is pure javascript. jQuery $.ready used only on html for convenience
Call to action
Could use the following
A glossy button with rounded corners
spreading this javascript library far and wide
I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.
Main-page(index.php):
<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>
Child-page(loaded in div(graph.php)):
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>
Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:
Put eval() around my code [I saw on a guide that this could lead
to malicious user attacks].
Create the scripts on the main page then just import the data using:
document.createElement() and .parentNode.insertBefore()
Create a listener and call the functions when I open graph.php
And this good example
Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.
From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.
For example:
...
<div id="main-page-container">
<iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
</div>
...
See reference and usage example.
I would suggest using jQuery's .load() function for this.
Take a look here: jQuery API
Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.
Take for instance:
function addScriptText(js_code) {
var element = document.createElement("script");
element.innerHTML = js_code;
document.head.appendChild(element);
}
will not work in IE8 and below.
You must use eval to accomplish this:
function addScriptText(js_code) {
window.eval.call(window, js_code);
}
Otherwise you need to dynamically request an external js file such as:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);
Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)
Working solution with jQuery:
Page 1:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page2").load("page2.html");
});
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>
Page 2:
<h2>Page 2 Header</h2>
<script type="text/javascript">
alert("Page 2 loaded and javascript executed!");
</script>
Can anyone give me a solution on How can I load the Google plus share button (not the +1 button) in an iframe asynchronously. I have managed to do that for the +1 button.
Try this html snippet:
<iframe src="https://plusone.google.com/_/+1/fastbutton?bsv&size=medium&hl=en-US&url=http://test.com/&parent=http://test.com/" allowtransparency="true" frameborder="0" scrolling="no" title="+1"></iframe>
If what you're trying to do is explicitly render the button when a user hovers over something, what you need to do is use the explicit render flow as described here:
https://developers.google.com/+/plugins/+1button/
However, there's a twist, because you're using a share button, you can't use the explicit render code to render directly to the div. Instead, you will create your share link, set the render to explicit, and then can use JavaScript to trigger the rendering of the share button.
The relevant code is:
<html>
<head>
<title>+Share: Explicit render</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit'
};
function renderShare() {
gapi.plus.go(); // Render all the buttons
}
</script>
</head>
<body>
Render the share control
<!-- a share button that will get rendered when gapi.plus.go is called -->
<div class="g-plus" data-action="share" id="share-div"></div>
</body>
<script type="text/javascript">
// Asynchronously load the plusone script, for performance
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</html>
For you, I am guessing that you're trying to use a different trigger for rendering your +1 button than a button the user explicitly has to click, you could just use the appropriate event for what you want to trigger the render.
I've tried the following HTML code on several different Windows 7 computers with Internet Explorer 8, and everywhere this crashes Internet Explorer. I have not been able to reproduce this with IE7, or on Windows XP with IE8.
<!doctype html>
<head>
<title>Crashes IE8 on Win7</title>
<style>
article { display: block; }
</style>
<script>
document.createElement('article');
document.createElement('nav');
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<nav><ul><li>
<div id="map_canvas"></div>
<article>
</li></ul></nav>
</body>
The only real bug in the page, is the missing </article> tag. The rest is all required to make IE crash. I'm sure I could have narrowed it down further by disassembling the Google Maps API, but that went a bit too far for me.
Can anybody else reproduce this, or is their some weird configuration that only applies to all the machines I have tested this on?
EDIT: To be more clear, I am not looking for a fix to my code. (The fix would be: add missing </article> tag.) I am looking if this crashes IE8 on Win7 other people also, and maybe if I should report this somewhere, since I understand crashes can often be used to take control of a victims computer.
I can replicate your problem using IE8 on Windows 7. It could well be related to this post which suggests that the problem is caused by trying to modify an element before the page has finished loading. If this is the case you can fix the problem by using jQuery to call the loadScript method after the page has finished loading. E.g.
<script>
$().ready(function() {
loadScript();
});
</script>
Try moving the script down to the bottom of the page.
I'd also tidy up the following:
Remove the non-html code in the body
Add opening & closing html tag
This works for me:
<!doctype html>
<html>
<head>
<title>Crashes IE8 on Win7</title>
<style type="text/css">
article { display: block; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript">
document.createElement('article');
document.createElement('nav');
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>
My goal is to dynamically create an iframe and write ad JavaScript into it using jQuery (e.g. Google AdSense script). My code works on Chrome, but fails intermittently in Firefox i.e. sometimes the ad script runs and renders the ad, and other times it doesn't. When it doesn't work, the script code itself shows up in the iframe.
My guess is these intermittent failures occur because the iframe is not ready by the time I write to it. I have tried various iterations of iframe_html (my name for the function which is supposed to wait for the iframe to be ready), but no luck. Any help appreciated!
PS: I have read various threads (e.g. jQuery .ready in a dynamically inserted iframe). Just letting everyone know that I've done my research on this, but I'm stuck :)
Iteration 1:
function iframe_html(html){
$('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
$('#myiframe').load(
function(){
$('#myiframe').ready( function(){
var d = $("#myiframe")[0].contentWindow.document;
d.open();
d.close();
d.write(html);
});
}
);
};
Iteration 2:
function iframe_html(html){
$('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
function(){
$("#myiframe").contents().get(0).write(html);
}
);
};
Honestly, the easiest and most reliable way I have found when dealing with the load events on iframes uses the "onload" attribute in the actual iframe tag. I have never had much of a problem with setting the content once the "onload" event fires. Here is an example:
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
The problem with this is that you have to use attribute tags and global function declarations. If you absolutely CAN'T have one of these things, I haven't had problems with this (although it doesn't look much different than your attempts, so I'm not sure):
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
$iframe.load(iframe_load);
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
This is one of the most frustrating parts of the DOM and JavaScript - my condolences are with you. If neither of these work, then open up Firebug and tell me what the error message is.
false.html:
<html>
<head><title></title></head>
<body></body>
</html>
JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function iframe_html(html)
{
var id = "myiframe_" + ((new Date()).getTime());
$('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');
var loadIFrame = function()
{
var elIF = window.document.frames[id];
if (elIF.window.document.readyState!="complete")
{
setTimeout(loadIFrame, 100);
return false;
}
$(elIF.window.document).find("body").html(html);
}
loadIFrame();
};
$(function(){
iframe_html("<div>hola</div>");
});
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>
then please see this link