My problem atm is with manifest v2.
Since I've been developing this extension I've been facing a lot of problems because the new manifest V2 of google extensions, that removed the capacity of inline javascript in the html files.
So can someone tell me how to open a link in a new tab with the new manifest?
My html:
<li ng-repeat="pageInfo in pageInfos">
<img src="{{pageInfo.url}}" class="link"/>
<img src="http://www.end-timeillusion.com/images/site/sn_icons/facebook.fw.png" class="fbshare"/>
</li>
My external.js - don't work
$(document).ready(function(){
$('.fbshare').click(function(){
chrome.tabs.create({url: 'http://facebook.com/sharer/sharer.php?u=' + $(.link).attr('src')});
return false;
});
});
The problem is this code:
$(.link).attr('src')
You need quotation marks around .link, like this:
$('.link').attr('src')
I tested your code in a test extension and the link opened in a new window, once I added the quotation marks.
Related
I have a project that is implemented with Django, Dojo and JS. I've been banging my head against this issue all week and cannot find any hints online as to what the problem might be. Hopefully someone here has either run into this issue as well and can shed some light on the problem.
I have an unordered list <ul> similar to the following:
`````
<ul>
<li><a target="displayArea" id="pre-select" href="foo.html>Foo</a></li>
<li><a target="displayArea" href="bar.html">Bar</a></li>
<li><a target="displayArea" href="baz.html">Baz</a></li>
</ul>
```
elsewhere in the code is the target iframe:
```
<iframe style="border: none;" name="displayArea" id="displayArea" width="100%" height="95%" title="Report Area"></iframe>
```
When I mouse over and click "Foo" it works as expected, "Foo" is displayed in the iframe shown above. If, however, I execute the following script which is immediately after the </ul> in the code:
<script>
window.document.getElementById('pre-select').click();
</script>
"Foo" is not displayed in the iframe, instead it briefly appears in the host window frame then disappears. I'm not sure why there is a difference clicking directly on the link as it appears in the <ul> or executing the <script> that does the "click" programmatically.
Any insight would be greatly appreciated...
As stated in the problem description I expected the link to appear in the target iframe when the script:
<script>
window.document.getElementById('pre-select').click();
</script>
is executed but it doesn't appear in the iframe. If the link is clicked with the mouse it works as expected.
I was able to accomplish what I needed to by adding an onload to the of my HTML like this:
<body onload="document.getElemenById('pre-select').click()">
This does exactly what I need and can be changed easily when the users inevitably change their minds :)
Thanks to epascarello and markfila for their help pointing me in the right direction.
I have a questing about knockout not rendering html attributes properly.
I have a span tag that gets populated with data using knockout JS.
<span id="s34" data-bind="html: $parent.Branch.TextComments"></span>
TextComments is dynamic and sometimes contain text only. Other times text and < a> tags. For example:
This is text example of TextComment. Access google at Goole link. Thank you!
When the page reders, the link reders correctly as a url but when I click it, it doesn't open a new tab, it redirects the page to google instead of opening a new tab which target="_blank" should accomplish.
Any ideas?
Thanks in advance!
I was curious if it really doesnt work.
I set up this minimal code snippet and everything works as expected in my local environment
var system = {
viewModel:function (data) {
var self = this;
self.texts = ko.observableArray([
"text 21321",
'text with target blank ',
'text <a href="https://google.com" > without target blank </a> ',
'text 789'
]);
}
}
var vm = new system.viewModel();
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach:texts">
<span data-bind="html:$data"></span> <br>
</div>
Test stack-snippet target-blank
So in this snippet the links do also not open correct for me, but maybe this is a snippet restriction. See the normal link i added with target="_blank" it also doesnt open in snippet. in my local environmet all the links with target="_blank" opens in a new tab while the other one does not
I have been trying to save the source code of a section of a webpage using PHP. When I extract the content of whole webpage, the source code order is preserved but when I try to get part of the document using
$dom = new DOMDocument;
$dom->loadHTML($webpage);
$xpath = new DOMXPath($dom);
$query_tag = "//div[contains(#class, 'class-name')]";
$result = $dom->saveHTML($xpath->query($query_tag)->item(0));
The script tag gets messed up. Until now, this is the only website where this issue occurred. Are there some limitations of saveHTML function that I am not aware of?
This is what I should be receiving:
<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
$('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onClick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96" /></a>');
$('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
$('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
$('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);
});</script> </div>
This is what I actually get:
<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></script>
</div>');
$('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onclick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96"></a>');
$('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
$('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
$('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);
}); </div>
In case you missed it, the ending script tag has moved up a few lines.
Just to be clear, I am not talking about rendered HTML. I am talking about the actual source code that I get after making the request. Any help on how to resolve this issue will be appreciated.
I know that the function saveHTML is causing the issue because when I echo the whole page through PHP, every tag is in the right place.
First of all, your code should be triggering a good bunch of warnings like these:
Warning: DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in
Entity Warning: DOMDocument::loadHTML(): Unexpected end tag :
strong in Entity Warning: DOMDocument::loadHTML(): Tag header
invalid in Entity
This is to expect with on-the-wild HTML (and this page's code is nor particularly bad) but you haven't even mentioned it, what makes me suspect that you might not have error reporting enabled in your development box.
Additionally, the page has huge amounts of JavaScript and DOMDocument is just an HTML parser.
With that, we can get a clear picture of what's happening. Since DOMDocument is not a full-fledged browser it doesn't understand JavaScript code. That means that it detects the <script> tag but it doesn't handle its contents as JavaScript—it merely looks for a closing tag and the first one he finds is this:
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
^^^^^^
It doesn't know that it's a JavaScript string and should be ignored. Instead, it thinks the wrong tag is being closed so it attempts to fix what's technically invalid HTML and adds the missing </script> tag.
For this precise reason, the <script>...</script> tag set has traditionally been written this way:
<script type="text/javascript"><!--
var foo = '<p>Escaped end tag<\/p>';
//--></script>
... so user agents that are unaware of JavaScript can safely ignore the whole tag (hey, it's nothing but a good old HTML comment). However, nowadays it's almost universally considered bad practice because "all browsers understand JavaScript".
Final note: the DOM extension is probably aware of the <script> tag and knows it isn't allowed to have other tags inside. That explains why inner opening tags are not considered.
I'm pretty sure this is another DOH! facepalm questions but as designer and not a programmer I need some help getting it right.
What I have is an index file calling local .html files via jQuery .load. Just like this:
(some tabs functionality not relative here - thus the link target call)
Lightbox</li>
<div id=lightbox">
<div class="load">
<script type="text/javascript">
$('.load').load('examples/lightbox.html');
</script>
</div>
</div>
I also have an external .js file that has a bunch of functions that handles some lightboxes among other things. Standard <script src="js/typography.js" type="text/javascript"></script>
Which contains:
$(document).ready(function(){
$(".open-lightbox").on("click", function(){
$('.lightbox').css('display','block');
});
$('.close-lightbox').click(function(){
$('.lightbox').css('display','none');
});
});
My problem is that if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup it doesn't work.
something like :
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
If i move the html code right to the index page instead of the .load, no problem, same if I moved the JS as an inline <script>...</script> rather than calling it extrenally. Works fine in both cases.
My spidey sense tells me this has something to do with my function and .load not executing in the order I need them to, but my javascript copy/paste skills only go this far.
Can anyone tell me if I can make this combination work? I'd really appreciate it.
EDIT
Maybe I explained my self poorly so let me try and post a better example.
If my index code is as followed everything works: My lightbox pops up as intended.
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
</div>
<--End Tab Content-->
</div>
When the said tab is clicked the content inside "thistabid" show up. Whatever that content may be.
Now if i do :
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<script type="text/javascript">
$('.somehtmlpage-load').load('examples/lightbox.html');
</script>
</div>
<--End Tab Content-->
</div>
The lightbox doesn't work. The content of lightbox.html is
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
Same as the html in the 1st example where everything works. The only difference it's being jQuery loaded rather than hard coded.
What I mean by "if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup" is that if the html is part of the externally called file then the lightbox function isn't working. If it's hard coded it pops up like intended.
On 1st glance the .on seems like should be the solution but most likley my implementation of it is off the mark :/
The 'on' or the 'live' function needs to be applied through an element that exists on the page. Generally some parent of the actual element is used. Can you try something on the following lines with the correct references to the elements on your page:
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<!--leave tab empty for now -->
</div>
<--End Tab Content-->
</div>
<script>
(function(){
$('.somehtmlpage-load').load('examples/lightbox.html');
//live or on needs to be applied to an element that exists on th page
$('#thistabid').on('click', '.open-lightbox', function(){
$('.lightbox').css('display','block');
});
$('#thistabid').on('click', '.close-lightbox', function(){
$('.lightbox').css('display','none');
});
})();
</script>
There seems to be a race condition between your load() and document ready.
To address this you'll need to:
either wait for the load() to complete before you attach the click events
or attach the click to the container of your load() step and use event delegation.
See this page and this other one for more information on how to use on() for delegation.
The code would look like this:
$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
$('.lightbox').css('display','block');
});
Using a SSI solved my problem. I was trying to keep it all Local Drive friendly but it seemed to be causing more problems than anticipated.
Pick your favorite dev environment...I didn't run into any conflicts on either.
ASP - <!--#include file = "examples/lightbox.html" -->
PHP - <?php include 'examples/lightbox.html';?>
Just in case someone else runs into a similar problem.
this code
var tip = "<p class='adobe-reader-download'>Most computers will open PDF documents automatically, but you may need to download <a title='Link to Adobe website-opens in a new window'";
tip +=" href='http://www.adobe.com/products/acrobat/readstep2.html' target='_blank'>Adobe Reader</a>.</p>";
if($("div#maincontent a[href*='.pdf']").length>0){
$("div#maincontent").children(":last-child").after(tip);
works fine with this
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
but not working with this
<script
type="text/jscript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
What do you mean by "doesn't work"? Does the tip not get appended to the page? Does the link for the tip not work? Be a bit more descriptive when you say it "doesn't work", tell us how.
I've made an example of this code here: http://jsbin.com/akugo/edit
With JSBin you can tell it what version of jQuery to use, and I've tested it using 1.3.2 and 1.4.2 and I don't see any problems. The only thing I changed from the code you posted is that I closed the "if" statement with a bracket ( "}" ).
$(document).ready(function() {
var tip = "<p class='adobe-reader-download'>Most computers will open PDF documents automatically, but you may need to download <a title='Link to Adobe website-opens in a new window'";
tip += " href='http://www.adobe.com/products/acrobat/readstep2.html' target='_blank'>Adobe Reader</a>.</p>";
if ($("div#maincontent a[href*='.pdf']").length > 0) {
$("div#maincontent").children(":last-child").after(tip);
}
});
with this:
<div id="maincontent">
your pdf
</div>
for outputs with jq 1.4:
Your pdf
Most computers will open PDF documents automatically, but you may need to download Adobe Reader.