prevent all links in fullscreen web app to open in safari? - colorbox

I have below script that prevents links in a fullscreen-standalone web app to open in safari, this works great, but I have a colorbox script that opens a lightbox in an iframe, or it should!
Now it is opening the iframe script in fullscreen, not in an iframe in the lightbox.
So my question is, how can I change the script so it works on all links except on the one with class="iframe"?
So that the one with class iframe work as it should.
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
Thanks a lot!

Solved, I found the answer.
I had to change this
if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
to this.
if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) )&& !$(curnode).hasClass('iframe') ) {

Related

Javascript inside a xwiki macro have no effect

I am trying to write a macro, which embed draw.io. when user double click the diagram image I want to open draw.io in aonther window and get image data back as text. but my javascript inside macro not working at all.
It seems my javascript code in macro is not executed at all, can somebody tell me the right way to inject javascrpt code inside a velocity macro?
updates: I have noticed that when editing in CKEditor, my javascript code will not be executed, bu when editing in inline editor it will be executed.
{{velocity}}
$wikimacro.content
#if($wikimacro.content == '')
#set ($wikimacro.content = 'iVBORw0KGgoAAAANSUhEUgAAAIMAAABHCAYAAAAk5PTEAAAC4HRFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMjE3Mi4yNS4xNjEuMjExJTIyJTIwbW9kaWZpZWQlM0QlMjIyMDIxLTExLTA4VDA3JTNBNDglM0EzMC4wMzdaJTIyJTIwYWdlbnQlM0QlMjI1LjAlMjAoWDExKSUyMiUyMGV0YWclM0QlMjJ4MTM1OUpQR29sZ21udEFCTFIxSCUyMiUyMHZlcnNpb24lM0QlMjIxNS42LjIlMjIlMjB0eXBlJTNEJTIyZGV2aWNlJTIyJTNFJTNDZGlhZ3JhbSUyMGlkJTNEJTIyNEd0aVp4cWRuemJnanpmMC0zXzElMjIlMjBuYW1lJTNEJTIyUGFnZS0xJTIyJTNFalpKTlQ4UWdFSVolMkZUWThtTFdqdFhsMjdidHg0cXNaNEpHVXNKTFEwTEYxYWY3MVVwbCUyRlpiT0tKNFprUFp0NGhvdnU2ZnpHc0ZXJTJCYWc0cEl6UHVJUGtlRWtEZ2wlMkZoakpFRWlTa0N5UXlraU9iQUdGJTJGQUdFTWRKT2NqaHZBcTNXeXNwMkMwdmRORkRhRFdQR2FMY04lMkI5WnElMkIyckxLcmdDUmNuVU5mMlUzSXBBTSUyRks0OENQSVNrd3ZKJTJCa3VlR28yQmVNa1o4RzRkaXRFODRqdWpkWTJXSFclMkZCeldxTiUyQmtTOGc0M3ZITmpCaHI3bjRRRFl6S1Z1OVBISlQ5JTJCdVpOOUw5enJIVmE1TU5YaHdOaXNIU1lGak80YURtT1JPS0pQVGtnTFJjdkswZXY4MGowVHRsYiUyQmxuZ1R5NEd4ME4lMkZzTTVtbjklMkY4R2RBM1dERDRFRSUyQmpEZlVqQkwwTXpGTkF0JTJCaWVUcUdLbGZZcU00Y3FydWZTaWlqZFFtT202TE9EUHQlMkZySE5QOEYlM0MlMkZkaWFncmFtJTNFJTNDJTJGbXhmaWxlJTNFUXJoXAAAAKNJREFUeJzt0rENACEQwDD2X5rvUoOe6mRL2SBrAQDAA1vjO7aZywzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzEDMQMxAzkegaNDwAA/vkAmk+zV9RvOdkAAAAASUVORK5CYII=')
#end
#if($xcontext.action == 'edit')
{{html}}
<img
class="drawio"
style="cursor: default"
src="data:image/png;base64,$wikimacro.content"
/>
<script>
//<![CDATA[
document.addEventListener('dblclick', function(evt)
{
var url = 'http://172.25.161.211/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json';
var source = evt.srcElement || evt.target;
if (source.nodeName == 'IMG' && source.className == 'drawio'){
if (source.drawIoWindow == null || source.drawIoWindow.closed) {
// Implements protocol for loading and exporting with embedded XML
var receive = function(evt) {
if (evt.data.length > 0 && evt.source == source.drawIoWindow) {
var msg = JSON.parse(evt.data);
// Received if the editor is ready
if (msg.event == 'init') {
// Sends the data URI with embedded XML to editor
source.drawIoWindow.postMessage(JSON.stringify({action: 'load', xmlpng: source.getAttribute('src')}), '*');
}
// Received if the user clicks save
else if (msg.event == 'save')
{
// Sends a request to export the diagram as XML with embedded PNG
source.drawIoWindow.postMessage(JSON.stringify(
{action: 'export', format: 'xmlpng', spinKey: 'saving'}), '*');
}
// Received if the export request was processed
else if (msg.event == 'export')
{
// Updates the data URI of the image
// TODO save to xwiki server as macro's content
source.setAttribute('src', msg.data);
}
// Received if the user clicks exit or after export
if (msg.event == 'exit' || msg.event == 'export')
{
// Closes the editor
window.removeEventListener('message', receive);
source.drawIoWindow.close();
source.drawIoWindow = null;
}
}
};
// Opens the editor
window.addEventListener('message', receive);
source.drawIoWindow = window.open(url);
}
else
{
// Shows existing editor window
source.drawIoWindow.focus();
}
}
});
// ]]>
</script>
{{/html}}
#else
{{html}}
<img src="data:image/png;base64,$wikimacro.content" />
{{/html}}
#end
{{/velocity}}
In XWiki the insertion of web resources like css and js content is generally done separately through what is called "skin extensions", best is probably to look at the documentation on https://extensions.xwiki.org/xwiki/bin/view/Extension/Skin%20Extension%20Plugin.
In short, it involves adding an object of type XWiki.JavaScriptExtention in the page holding your macro and reference to it in your macro's code.
Note that an extension which integrate draw.io already exist on https://extensions.xwiki.org/xwiki/bin/view/Extension/Diagram%20Application, and I guess looking at the source of this extension might be interesting.

Adding auto-ads with Vue.js

I have tried to add auto-ads to my website which uses Vue.js but there are no requests via the script.
I have tried the vue-adsense plugin, which can be found on npm https://www.npmjs.com/package/vue-google-adsense
but they have no support for auto-ads, normal ads work fine with this plugin.
This is the code which needs to be added:
<script data-ad-client="ca-pub-0990618353003742" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Is there a solution for adding auto-ads on a vue.js site?
Script tags cannot be placed in a part of the DOM controlled by an instance of Vue(). All you need to do is place the script in the <head> of your document. If you are using Vue CLI to create your project, the file you do this in is /public/index.html.
You can init your ads how many you've added after change data. For example.
mounted: function () {
this.data = [1,2,3,4];
var adCount=3;
for (var i = 0; i < parseInt(adCount); i++) {
window.setTimeout(function () {
console.log('vue ad ' + i + ' inited');
(adsybygoogle = window.adsybygoogle || []).push({});
}, 300);
}
},

iview drawer(transfer=false, inner=true ) show in tag outside rather than inside in IE10

Situation is OK in Chrome but also the IE11
With "transfer"(false) and "inner"(true) set, Drawer work as follow link:
https://run.iviewui.com/prdkRwyB
normally effect
Problem occur when using IE10
The drawer show in tag outside rather than inside.
abnormally effect
And The html code of drawer has been place out of its parent tag
If you use F12 developer tools to check the HTML and CSS, you can see that the drawer is outside the iview card body, it seems that this issue is related to iView, you could contact them and feedback this issue.
The screenshot in IE 11:
The screenshot in IE 10:
I found the problem solution.(iview 3.2.2)
iview/src/directives/tansfer-dom.js
This js file handle the DOM transfer job, which lead to drawer panel transfer out of the parent DOM.
inserted (el, { value }, vnode) {
if ( el.dataset && el.dataset.transfer !== 'true') return false;
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
const parentNode = el.parentNode;
if (!parentNode) return;
const home = document.createComment('');
let hasMovedOut = false;
if ( value !== false) {
parentNode.replaceChild(home, el); // moving out, el is no longer in the document
getTarget(value).appendChild(el); // moving into new place
hasMovedOut = true
}
if (!el.__transferDomData) {
el.__transferDomData = {
parentNode: parentNode,
home: home,
target: getTarget(value),
hasMovedOut: hasMovedOut
}
}
},
As file show
if ( value !== false)
The judgment on Line 9 is unappropriated.
After replacing code as below and rebuild the iview by running 'npm run dist',
if( value && value !== false )
drawer show well in IE10

Clicking 'back' on a form unloads web resource

Say I have a form with a web resource on it, when viewing the form and clicking the web browser's 'back' button the web resource seems to unload, if I click the back button again then it behaves as I'd expect.
Has anyone else experienced this? Is there a way to prevent the web resource from unloading when a user clicks 'back'?
Note: This seems to happen in both IE (10,11) and Chrome, but not Firefox.
Had the same issue, looks like a bug.
Until Microsoft fixes it, use the following in your webresource to trap the back event and redirect it properly.
$(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
window.parent.history.back();
window.parent.history.back();
}
});
window.history.pushState('forward', null, './#forward');
}
}

Automatic Reload on Install

When a script is injected in a safari extension it runs on page load, so that means when an extension is installed the injected javascript will only apply to newly-opened pages or pages which are reloaded afterwards. Does anyone know how to ensure the javascript is run without having to reload?
Alternatively, forcing users to load... this seems a bit dangerous though.
I've also tried to find a way to "execute" or "attach" a script on install. This is possible in Chrome and Firefox, without having to reload the page. Unfortunately in Safari I haven't found a way to do this without having to reload the page and let the normal addContentScript handlers take care of injecting the script.
To reload all Safari tabs directly after extension has been installed:
/* In glabal.js */
// Reloads all tabs
function reloadTabs() {
var browserWindows = safari.application.browserWindows;
for (var i = 0; i < browserWindows.length; i++) {
var tabs = browserWindows[i].tabs;
for (var j = 0; j < tabs.length; j++) {
tabs[j].url = tabs[j].url;
}
}
}
// Called on first run
function onInstall() {
reloadTabs();
}
var firstRun = localStorage['extensionHasPreviouslyRun'] === undefined ||
!JSON.parse(localStorage['extensionHasPreviouslyRun']);
if (firstRun) {
onInstall();
localStorage['extensionHasPreviouslyRun'] = JSON.stringify(true);
}