I'm currently developing a Safari Extension, which should search newspaper articles for country or location names. For that, I'd like to search the innerHTML of the current website on which I am. My extension consists of a button in my task bar, which toggles a popover that should show a list of the countries/locations mentioned in an article and a map on which those places are marked.
The problem is that I have no clue how to access the innerHTML in search.js.
I'd like to search the innerHTML for specific strings, e.g. "Germany". The apple documentation is not really clear on how to access the website content from an extension. Or how to access anything once one got an safari.application.activeBrowserWindow object.
Safari Extensions Development Guide
Thanks a lot for your help in advance!
This is my code so far:
popover.html
<!DOCTYPE html>
<html>
<head lang="en">
<link href="popover.css" rel="stylesheet">
<title>popover</title>
</head>
<script src="nameSearch.js"></script>
<body>
<div id="locationList">
<ul id="resultList"></ul>
</div>
<div id="map"></div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="map.js"></script>
</html>
globalPage.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Global Page</title>
<script type="text/javascript">
var countriesDE = ['Odessa'];
var results = ['Germany'];
</script>
</head>
<body>
</body>
</html>
nameSearch.js
const myGlobal = safari.extension.globalPage.contentWindow;
myGlobal.results.push(safari.application.activeBrowserWindow.page.innerHTML);
if (document.documentElement.lang.indexOf("de") != -1) {
for (i = 0; i < myGlobal.countriesDE.length; i++) {
if (safari.application.activeBrowserWindow.innerHTML.indexOf(myGlobal.countriesDE[i]) != -1) {
myGlobal.results.push(myGlobal.countriesDE[i]);
}
}
}
map.js
const myGlobal = safari.extension.globalPage.contentWindow;
var ul = document.getElementById("resultList");
for (i = 0; i < myGlobal.results.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(myGlobal.results[i]));
li.setAttribute("id", myGlobal.results[i]);
ul.appendChild(li);
}
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200] // This is only a test
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
chart.draw(data, options);
}
You need to inject a script into a web page if you want to access its DOM.
Related
I want to get all the file names and sub folders names in JavaScript. But, in my code the activeX object method is not working. Could you find the problem in my code please?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Report Interface</title>
<script type="text/javascript">
function FindFile(FOo)
{
var fs = new ActiveXObject("Scripting.FileSystemObject");
var Folder = fs.GetFolder(FOo);
var FileCollection = Folder.Files;
var Files = new Array();
for(var objEnum = new Enumerator(FileCollection); !objEnum.atEnd(); objEnum.moveNext())
{
strFileName = objEnum.item();
alert(strFileName);
}
}
</script>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var file_path = "C:/xampp/tomcat/webapps/brt-example/report"; // Starting directory
FindFile(file_path);
}
</script>
</body>
</html>
Only IE has support for ActiveX, it can't be accessed with default security settings due to security reasons, if you have to run this -
Go to IE Tools > Internet options > Security > Custom Level >
Under the ActiveX controls and plug-ins, select\ enable for Initializing and Script ActiveX controls not marked as safe for scripting.
I am trying to achieve something like, www.example.com/en/test/page.html will load the frameset of www.example.com/2.html.
Which I am able to do.
But now once 2.html is loaded in frameset I want to replace .html" to .html" target="_top".
So that all the links present in 2.html would be opened in the parent window instead of frameset itself.
<!DOCTYPE html">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<script>
(function divert()
{
var urlString = parent.document.URL;
var a1 = new RegExp("/en/test/page");
if(a1.test(urlString)) {document.write('<frameset cols="100%" rows="100%"><frame src="http://www.example.com/2.html"></frameset>');}
else{document.write('<frameset cols="100%" rows="100%"><frame src="http://www.example.com/3.html"></frameset>');}
var str = document.getElementById("demo").innerHTML;
var res = str.replace('.html"', '.html" target="_top"');
document.getElementById("demo").innerHTML = res;
})();
</script>
</head>
<body onLoad="divert()"></body>
Hi #Vinod you can use target="_parent"if you have only 2 level of frame-set or just want to open the link to the parent frame only..
Or to open the link to the current page you can use target="_top"
You can read more about it here
UPDATE:
You can also use JavaScript to detect if page is loaded inside a frame and than add target to the links pragmatically..
You can use window.location.origin and parent.window.location.origin to detect if you are in the frame
And than you can use following code to add target using JavaScript
using jquery:
$(document).ready(function(){
$('#link_other a').attr('target', '_blank');
});
without using jquery
window.onload = function(){
var anchors = document.getElementById('link_other').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
anchors[i].setAttribute('target', '_blank');
}
}
<!DOCTYPE html">
<html lang='en' xml:lang='en' xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<script>
(function divert()
{
var urlString = parent.document.URL;
var a1 = new RegExp("/en/test/page");
function targetUrl(){
var links = document.getElementById("demo").contentDocument.documentElement.getElementsByTagName('a');
for(var i =0; i<links.length; i++){
links[i].target = '_parent';}
}
if(a1.test(urlString)){document.write('<frameset cols="100%" rows="100%"><frame id="demo" src="http://www.example.com/2.html"></frameset>');}
else{document.write('<frameset cols="100%" rows="100%"><frame id="demo" src="http://www.example.com/3.html"></frameset>');}
document.getElementById("demo").onload= targetUrl;
})();
</script>
</head>
<body></body>
</html>
I am trying to make a really simple slider. All is working correctly except one thing. The problem is that it's not loading the image named as 'b.jpg'. If i rename the same picture with any other name it loads it but it's not loading any image with name 'b.jpg'.
Here's my code. Please tell me if something is wrong.
<!DOCTYPE html>
<html>
<head>
<title>Slider ~ Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="imgSlider">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here's script.js :
var imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
var mySlider = document.getElementById('imgSlider');
var imgIndex = 0;
function changeImage() {
mySlider.setAttribute('src', imgLinks[imgIndex]);
imgIndex++;
if (imgIndex >= imgLinks.length) {
imgIndex = 0;
};
}
var intervals = setInterval(changeImage, 2000);
mySlider.onclick = function (c) {
clearInterval(intervals);
}
your code has b.jgp and all others are jpg.
imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
correct it to b.jpg it will work fine
imgLinks = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
My task for my Javascript class is to create a script for this page that changes the image every 3 seconds. I think my code is correct, however Firebug tells me "document.getElementByID is not a function." Can someone show me what I am doing incorrectly?
This is my JS script.
<script type="text/javascript">
var i = 0
var lightArray = ["pumpkinOff.gif", "pumpkinOn.gif"]
var currentLight = document.getElementByID('light')
// ChangeLight Method Prototype
function changeLight() {
currentLight.src = lightArray[i++];
if (i == lightArray.length) {
i = 0;
}
}
setInterval(changeLight, 3000)
</script>
Here is my edited HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for Programmers</title>
</head>
<body>
<h2>Happy Halloween!</h2>
<img id="pumpkin" src="pumpkinoff.gif" alt="pumpkin">
<script src="../Script/spooky.js"></script>
</body>
</html>
Incorrect capitalisation on
var currentLight = document.getElementByID('light')
Should be:
var currentLight = document.getElementById('pumpkin')
I have attached a working fiddle:
http://jsfiddle.net/11csf4k2/
It's a typo it should be:
var currentLight = document.getElementById('light'); //Not ID
It should be Id not ID:
document.getElementById('light');
Also note that you don't have element with id light on your page. It probably should be
document.getElementById('pumpkin');
Why does this work
app.prints(address,list.options[list.selectedIndex].value);
but this doesn't?
app.prints(status,macAddress);
JavaScript
var hey = 5;
var app = {
createList: function () {
for (var i = 0; i < 5; i++) {
list.options[i] = new Option(hey + i, "mac" + i);
}
app.prints(address, list.options[list.selectedIndex].value);
},
prints: function (location, message) {
location.innerHTML = message;
},
manageConnection: function () {
var macAddress = list.options[list.selectedIndex].value;
app.prints(status, macAddress);
}
}
HTML
<!DOCTYPE html>
<!-- Don't panic! All this
code looks intimidating but eventually it will make sense. -->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="ECMA.js"></script>
<title>My LCD code</title>
</head>
<body onload="app.initialize();">
<p>Welcome to the LCD software</p>
<select id="list" onchange="app.prints
(address,list.options[list.selectedIndex].value);"></select>
<div id="address"></div>
<button id="connect" onclick="app.manageConnection();">Connect</button>
<div id="status">hi</div>
</body>
</html>
The difference is that a global status variable has already been defined by the browser to represent the text in the status bar. And, browsers don't allow a reference to the element to replace it.
To avoid the naming conflict, you can rename the element.
But, you really shouldn't depend on automatic globals for ids. Not all browsers implement the feature, and some only in certain modes.
var list = document.getElementById('list');
var address = document.getElementById('address');
app.prints(address, list.options[list.selectedIndex].value);