JavaScript Feed- Open links in new tab - javascript

I have a javascript kind of feed, its more like a widget which displays dynamic content (that content is syndicated from other site).
This is what I have:
<div id="previewWidget"></div>
<script type="text/javascript" src="https://api.something/hlwidgetcommon.js">
<script type="text/javascript" src="https://api.something/hlwidgetcommon.js"></script>
<script type="text/javascript" src="http://api.something/latestDiscussion.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
hl.latestDiscussion('previewWidget', {
discussionKey:'d06c3624-210e3-4a2b-a303-003f7ed66e038', <---------- random letters
maxToRetrieve:'3',
subjectLength:'50',
contentLength:'160',
moreUrl:'https://www.something.com',
showLoginStatus:'0',
loginUrl:'https://www.something.com',
domainUrl:'https://www.something.com',
cbUseBioBubble:'0',
includeStaff:'1',
HLIAMKey:'d06c3624-210e3-4a2b-a303-003f7ed66e038' <---------- more random letters
});
});
</script>
(http://www.pastebin.ca/3030247)
What I would like to do is that each link that feed generates is opened in a new tab.
There is no <a href="#"> for me to go and add target=_blank.
Example:
This is what the feed generates (its a forum feed):
http://imgur.com/iQ45OtK

Probably the easiest solution: if you have any <a> elements within your feed, then you can easily give them target="_blank" via JS. If using jQuery, you might use this bit of JS, for instance:
$("#previewWidget a[href]").each(function() {
$(this).attr("target","_blank");
});
If you are looking to scan the text of each post for URLs, then you could wrap those URLs with <a target="_blank"> elements. For more info, see this post, as it's a bit complicated to detect URLs accurately with JS.
Unfortunately, opening links in a new tab using Javascript is unreliable because this comes down to browser configuration issues - often you will be caught in a pop-up blocker. See this post for more detail.

Related

Linkify.js.org (jQuery) HashTags: Change the default URL destination to Twitter?

I'm sanitizing CDATA content from various third-party XML feeds, stripping all HTML server-side and using Linkify.js.org (v3.0.3) to safely reapply HTML tags to the sanitized plaintext links client-side.
My project relies a lot on jQuery (v3.6.0).
The linkify jQuery DOM Data API is working great on links and email addresses, but hashtags are proving problematic. By default, hashtags redirect to https://my-domain.com/current-dir/#<HashTag>, but I'd like them to redirect to https://twitter.com/hashtag/<HashTag>. I know this is possible from the demo examples, but I'd like to stick with a jQuery solution, and maintain the div data attributes if possible.
I've read the documentation from Linkify.js.org/docs/ but can't figure out how to change the hashtag URL without dropping the jQuery div data attributes.
Below is a simple example (it's important I maintain a _blank HREF target):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linkify</title>
</head>
<body>
<div data-linkify="this" data-linkify-target="_blank">
Domain Test: domain.com. Email Test: email#address.com. HashTag Test: #Linkify.
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/linkify.min.js"></script>
<script src="/js/linkify-jquery.min.js"></script>
<script src="/js/linkify-plugin-hashtag.min.js"></script>
</body>
</html>
Work's great, but as mentioned, #Linkify redirects to the same page (e.g; https://my-domain.com/current-dir/#Linkify).
Client-side JS is not my strong point, but is there a data-linkify attribute I can use to change the HashTag destination to Twitter? Or additional jQuery code I can use to modify the behaviour of the linkify-plugin-hashtag.min.js plugin?
Use the hashtag plugin options... And since you do not want to call linkify directly, you'll need to play with the default options.
If you add this, it should work out.
linkify.options.defaults.formatHref.hashtag= (href) =>
'https://twitter.com/hashtag/' + href.substr(1);
You can read more at https://linkify.js.org/docs/plugin-hashtag.html and https://linkify.js.org/docs/options.html

How to add a PHP page into blogspot.com new page

I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5. I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.
https://tranbongda.blogspot.com/p/function-myfunction-window.html
I used the code like this:
<script>
var Window;
// Function that open the new Window
function windowOpen() {
Window = window.open("http://hiteachers.com/soccer_parse.php?id=5",
"_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose() {
Window.close();
}
</script>
<button onclick="windowOpen()">Open page</button>
<button onclick="windowClose()">Close page</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function(){
$("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
});
});
</script>
My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page (https://tranbongda.blogspot.com/p/function-myfunction-window.html) without clicking on any button.
I have thought of creating iframe by using this:
<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>
But the blogger.com page does not accept it, and returns the error message like this:
This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.
Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.
Some other bloggers suggested to use AJAX, which is very new to me.
So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?
Can you help me please?
Thanks
As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something.
AJAX is accomplished by using the XMLHttpRequest object.
Mozilla's spec provides links and stuff which will show you how to use it
and w3schools is a good resource.
Then it's all comes down to editing the page directly
element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);

JavaScript in laravel-dompdf

I am using laravel-dompdf to generate a PDF with a summary of results, consisting of tables and a few images, nothing to spectacular. I would like to print highcharts in the generated PDF as well. So first, I want to try a simple javascript code to see if it was working... but it isn't. I have enabled the "DOMPDF_ENABLE_JAVASCRIPT" => true, but so far no luck yet. The simple code which I want to print:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
This only prints the foo and bar.. Could someone please help me out?
Dompdf (or more specifically Back-end that it uses for PDF rendering) doesn't really render javascript. What it does is - it parse everything inside <script type="text/javascript"></script> tag and adds it in the special section of the pdf file.
I'm not sure if this javascript is what you need, since you can work with the dom tree outside of the <script> tag. What you can do is write simple scenarios, for example like this one:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script type="text/javascript">
app.alert({cMsg:"Message", cTitle: "Title"});
</script>
Try to open generated file and you will see alert.
Here more complete guide on what you can do inside javascript section: Acrobat JavaScript Scripting Guide

JQuery Tooltip Troubleshooting

First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.

Cross Domain JavaScript Communication

Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.
So basically the code of customer's web page on customer's domain would be something like this
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>
And code of myserver.com/some_html_page.htm would be
$("#TestButton").click(function(){
alert("Hi");
});
I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?
As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.
One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library #Mark Price suggests will make your life much easier.
So here goes an example:
Clients Page:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestButton").click(function(){
jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
});
});
</script>
</head>
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>
Code on myserver.com/some_html_page.htm:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
// you will need to set this dynamically, perhaps by having your
// clients pass it into the URL of the iFrame,
// e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
var source_origin = "clients_page.com/index.html";
var messageHandler = function (data) {
// process 'data' to decide what action to take...
alert("Hi");
};
$.receiveMessage(messageHandler, source_origin);
</script>
</head>
Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.
As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).
Let me know if I can clarify anything, and best of luck! :)
You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below
document.getElementsByName("name of iframe")[0].contentWindow.functionName()
e.g.
document.getElementsByName("iframe1")[0].contentWindow.test()
One of the common patterns of doing cross-domain requests, is using JSONP.

Categories

Resources