I have an HTML page:=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src = "http://localhost/Stats/Stats.js">
</script>
</head>
<body>
<button onclick="test()">Test</button>
</body>
</html>
But when I use Firebug on this page, their seems to be many unwanted and unknown script tags and iframes.
I posted a picture but my rep won't let me.
What can I do?i tried running it through disk (using file:/// protocol) and in xampp (using http://localhost/) but no difference.
Just give the scripts and iframes that you do want a class.
Then, after the page has loaded, look at the document to get a list of all of the (a) script elements and (b) iframe elements. Simply iterate through these lists and remove any that don't contain the class you've assigned to permitted or desired elements.
Here's a short snippet that adds an event listener to the 'load' event of the window. When fired, this function nukes any iframe and script whose class doesn't contain 'desired'.
The code contains 2 scripts and 2 iframes. After the onDocLoaded function has run, there are only one of each remaining.
<!DOCTYPE html>
<html>
<head>
<script class='desired'>
"use strict";
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
var scriptElems = document.getElementsByTagName('script');
alert("initially, there are " + scriptElems.length + " scripts");
forEachNode(scriptElems, checkForSpecificClass);
scriptElems = document.getElementsByTagName('script');
alert("there are now " + scriptElems.length + " scripts");
///////////
var iframeElems = document.getElementsByTagName('iframe');
alert("initially, there are " + iframeElems.length + " iframes");
forEachNode(iframeElems, checkForSpecificClass);
iframeElems = document.getElementsByTagName('iframe');
alert("there are now " + iframeElems.length + " iframes");
function checkForSpecificClass(elem, index, list)
{
if (elem.classList.contains('desired') != true)
elem.parentNode.removeChild(elem);
}
}
</script>
<script src='someInjectedCrap.js'></script>
</head>
<body>
<iframe class='desired'>
</iframe>
<iframe src='someInjectedCrap.html'></iframe>
</body>
</html>
Related
This issue has shown up in the latest version of Chrome (74.0.3729.108). This is unique to the local filesystem, as I have other ways of loading up neighboring documents in iframes when the app is on a server.
In my app, we have been able to load up documents from the filesystem with JavaScript by writing iframes to the DOM, and then having the document in the iframe write it's innerHTML to sessionStorage. Once the iframe is done loading, we catch that with the onload attribute on the iframe and handle getting the item written to sessionStorage.
I have narrowed this down to some bare-bones code and found that this works only on the first try, and then any tries after the first fail.
Here is a minimal HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
Here is the JavaScript:
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
HandleLoad = function () {
'use strict';
var data;
try {
data = window.sessionStorage['data'];
delete window.sessionStorage['data'];
} catch (ignore) {
// something went wrong
}
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data !== null && data !== undefined) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
}
function OnLoad() {
var url = urls[0];
if (url) {
urls.splice(0, 1);
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '" onload="HandleLoad();"></iframe>';
}
}
In the filesystem, we have the HTML written into index.html, and right next to it are two minimal HTML files, Doc1.html and Doc2.html. Their contents are both identical except the identifying sentence in the body's div:
Neighbor document HTML:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
try {
window.sessionStorage['data'] = window.document.body.innerHTML;
} catch {
// no luck
}
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
When this is run, we should see the content HTML of the two neighbor documents written to the result div in index.html.
When I run this minimal example, I can see that the content is successfully written to sessionStorage and then to the DOM for the first document, but the next try fails. What can I do to get it to work consistently, and what is happening here that it fails?
I'm not sure what is causing the weird behavior, so hopefully someone else can provide some insight on what exactly is going on here.
In the meantime, here is an alternative solution using window.postMessage:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
iframe-load.js
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
window.addEventListener('message', event => {
'use strict';
var data = event.data;
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
})
function OnLoad() {
var url = urls.shift();
if (url) {
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '"></iframe>';
}
}
Doc1.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
window.parent.postMessage(window.document.body.innerHTML, '*');
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
I have the following little script that seems to work but two of the images appear broken. They load when I right click and load as new tab:
var target = document.getElementById('target');
var counter = 0;
var myPictures = [
'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
];
function nextPic() {
counter += 1;
if (counter > myPictures.length -1) {
counter = 0;
}
target.src = myPictures[counter];
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
<input type="button" onclick="nextPic()" value="change image" />
</body>
</html>
Just move this line inside your nextPic() function so you don't try to grab that div before it gets loaded in the DOM.
function nextPic() {
var target = document.getElementById('target');
...
Sometimes <script defer> will automagically wait for the DOM to load, sometimes it doesn't. It's JavaScript. It is what it is.
defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. To achieve a similar effect for dynamically inserted scripts use async=false instead.
Here's a good backstory on script loading.
var target = document.getElementById('target');
var counter = 0;
var myPictures = [
'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
];
function nextPic() {
counter += 1;
if (counter == myPictures.length -1) {
counter = 0;
}
target.src = myPictures[counter];
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
<input type="button" onclick="nextPic()" value="change image" />
</body>
</html>
So, I'm new to learning js. And I know that document.write is outdated and the new solution is element.innerHTML. I'm working through some tutorial, but in testing my code it's breaking. What would be the appropriate means of going about inserting element.innerHTML and it's accompanying code, to get this to work?
Below is my snippet:
<!DOCTYPE html>
<html>
<head>
<title>8. Javascript Arrays</title>
</head>
<body>
<h1>8. Javascript Arrays</h1>
<script>
<div id="flightDate"></div>
<div id="myValues"></div>
var flightDate = new Date("September 22, 2004");
var myValues = ["Oceanic", 815, flightDate];
for (i in myValues)
{
document.write("<br />" + myValues[i]);
}
</script>
</body>
</html>
You can display the output in the DIVs that you created.
document.getElementById('flightDate').innerHTML = flightDate;
for (i = 0; i < myValues.length; i++) {
document.getElementById('myValues').innerHTML += myValues[i] + '<br/>';
}
+= concatenates the value with the content that's already there.
I am attempting to use Google Feed API to display three current event listings for our homepage. This is to circumvent some of the issues we are having with a third part calendar application.
However, with the feed limit set to 3, the only listings that will show up for me are from Jan. 18. Is there a way to make the code show only current or future events?
Thanks in advance for any help.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
JavaScript
google.load("feeds", "1");
var feedcontainer=document.getElementById("feed");
var feedurl="http://25livepub.collegenet.com/calendars/publishers-calendar-7.rss";
var feedlimit = 3;
var rssoutput = '';
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl);
feedpointer.setNumEntries(feedlimit) ;
feedpointer.load(displayfeed);
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries;
for (var i=0; i<thefeeds.length; i++){
var untrimContent = thefeeds[i].content;
var trimContent = untrimContent.split("<br>", 2);
rssoutput+="<div><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></div>" + trimContent;
feedcontainer.innerHTML=rssoutput;
}
} else {
feedcontainer.innerHTML = "Error Loading Events";
}
}
window.onload=function(){
rssfeedsetup();
};
i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>