I'm using <app-route> in Polymer. Everything works fine, except redirection. I've read https://www.polymer-project.org/1.0/toolbox/routing, the explanation seems to be clear, but for some reason it doesn't work the way I would want it.
Somewhere down in the view I have an element...
<script>
Polymer({
is: 'user-auth',
responseHandler: function(event) {
var token = event.detail.response.d.token;
if (token != '') {
localStorage.setItem('access_token', token);
this.set('route.path', '/hello');
}
}
});
</script>
The problem is, it redirects to /x/y/z/hello instead of /hello as an absolute url. How could I make the redirect absolute?
Without the <app-route> it is hard to tell.
Another (dirty) option would be:
<style>
#redirect {
display: none;
}
</style>
...
<a id="redirect" href="/hello"></a>
...
<script>
...
// at the place where you want to redirect
this.$.redirect.click();
...
</script>
Related
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
Inspired by this html5rocks post, I thought I'd try link rel="import".
In the console, I get:
yay!
Loaded import: http://www.example.com/HelloWorld.htm
But I don't get "Hello World!" on the page.
Here's my code:
<!DOCTYPE html>
<html>
<body>
<script>
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
console.log('yay!')
} else {
console.log('boo!')
}
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)">
</body>
</html>
And HelloWorld.htm contains:
<h1>Hello World!</h1>
Edit:
In the console, I can see that <h1>Hello World!</h1> is inside the link tag as another #document, complete with <html><head></head></body>.
According to the same HTML5Rocks post, when you import an HTML resource, it is accessible as a JavaScript object. Specifically, a Document:
var myImport = document.querySelector('link[rel="import"]').import;
document.querySelector(/* get the element we want here */).appendChild(myImport.body);
That does contradict somewhat with the beginning of the article, which balks at using JavaScript to load HTML, but at least it uses much less JavaScript (the kind that can, perhaps, fit in a browser tag) and certainly is not subject to the CORS restrictions that AJAX has to deal with.
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
I need to apply this line:
target="_blank" onclick="exoMobilePop();"
To all links on my Drupal 7 website.
Can anybody help me with this?
If you really need this functionality on links and not on the whole document you can go with this solution.
...
<script>
(function() {
var linksOnPage = document.querySelectorAll("a");
var link = "";
for (var i = 0; i < linksOnPage.length; i++) {
link = linksOnPage[i];
link.setAttribute("target", "_blank");
link.addEventListener("click", function(e){
exoMobilePop();
});
}
})();
</script>
</body>
</html>
But be careful. This will address literally every link on your page. Including administrative links, menu items, etc. If it's not desired, you can replace "a" with a more specific selector.
Try the <base> tag. The target attribute specifies the default target for all hyperlinks and forms in the page. Place the tag in the <head> section.
Note: This attribute can be overridden by using the target attribute for each hyperlink/form (if needed).
<head>
...
<base target="_blank">
...
</head>
Use JavaScript (or jQuery) to handle and reroute the click events. JSFiddle
JavaScript
document.addEventListener("click", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});
jQuery
$("body").on("click", "a", function (e) {
// e.preventDefault(); // Prevent a link from following the URL
exoMobilePop();
});
I'm creating my first chrome extension. My aim is simple, on a certain webpage, I want to hide an element with id someid.
I've created a background page, which for now selects the element with id someid
and alerts it to the screen. Problem is, the value of ele is null.
Tried $("#someid").hide(); as well, no luck.
Is there something special I need to do to interact with the DOM in a tab? I alerted
tab.url and that shows the right url.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script>
$(document).ready(function(){
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "complete")
{
if(tab.url.indexOf("somedomain.com") > -1)
{
chrome.tabs.getSelected(null, function(tab){
var tabUrl = tab.url;
chrome.tabs.executeScript(tab.id, {file: "background.js"},function({
var ele = document.getElementById("someid");
alert(ele);
});
});
}
}
});
});
</script>
</head>
<body></body>
</html>
As Stan pointed out, the problem was improper context. I used a content script and that fixed the problem. thanks!