I use <amp-twitter> component to embed twitter data into my page:
<amp-twitter
width="375"
height="472"
layout="responsive"
data-tweetid="885634330868850689"
>
</amp-twitter>
but the resulted page doesn't pass the AMP validation. I'm getting Custom JavaScript is not allowed. I think it is caused by the way the embedded part is generated, namely <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> tag being added to the output.
I inspected documentation page for this component with #development=1 and it is valid. But the HTML generated there is completely different from the one I have. How this issue could be fixed?
This is not a problem with the amp-twitter component (which passes validation). Most likely it's a problem with your dev environment, for example, some frameworks inject custom JS to implement live reloading.
Report it as a bug to the AMP project on Github.
Related
I'm using the sample here to embed a Power BI report into a web application.
The application compiles properly, but I'm getting an error involving Promises. I've tracked down the solution here. It seems that I need to add the following somewhere in my application:
<script src="https://npmcdn.com/es6-promise#3.2.1"></script>
However, I have absolutely no idea where this script tag should go. Any suggestions? Thank you.
The es6-promise library is a polyfill for Promises, mostly used in IE.
If you need it, you just need to put it anywhere in your <head> tag, preferably before your <script src='.../powerbi.js>.
For more info on es6-promise: https://github.com/stefanpenner/es6-promise
I have used $.mobile.changepage to do the redirect in my phonegap+jquerymobile projects. However what makes me confused is that I need to put the script of all the pages to the same file index.html. If not, the redirect page can not execute the function in its header.
for example, my index.html seem to be
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
then, my device will redirect to test.html which seem to be
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
However, the script will never execute in test.html. Then I put the script to index.html, what I expect to be is done. Whatever, if I put all the script to the same page, the project will become harder and harder to be preserved. Appreciated for your help.
Intro
This article can also be found HERE as a part of my blog.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Solution 1
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
This is a quick solution but still an ugly one.
Working example can be found in my other answer here: Pageshow not triggered after changepage
Another working example: Page loaded differently with jQuery-mobile transition
Solution 2
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
In the end I will describe why this is a part of a good solution.
Solution 3
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.
Next
Official documentation, look for a chapter: Linking without Ajax
Realistic solution
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
Final words
This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLE about good jQuery Mobile page architecture. In a nut shell I am discussing that knowledge of how jQuery Mobile works is the most important thing you need to know before you can successfully create you first app.
Unlike normal ordinary HTML pages, jQuery Mobile uses ajax technology when navigating between pages. So make sure to import all your JS files and libraries in all your html pages.
If you notice closely you will see that JS files from previous page is taken into consideration when loading the second page. But if you force rrefresh the current page then the js files of the current page will be effective.
So as I said earlier make sure to import the js files in all the html files.
Also no need to call deviceready, use following syntax to call your page specific js functions
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
Jquery Mobile uses ajax to load a "page". A "page" here is a div with data-role=page. If you load a physical page index.html, you can navigate using changePage to any "page" div inside that page.
However, if you want to load a "page" from other physical page, jQM will only load the first "page" div from that page. What actually happen is you do not change page, jQM just load that particular "page" div using ajax and inject it to your current page.
You have two possible architecture where you put all your "pages" in a html page and navigate from there. Or you can have multiple page architecture. You can always mix this.
To physically change page, you need to add rel=external to your link.
I'm only using Angular.dart on part of my page...The rest contains another Dart app (compiled down to JS...everything is in JS from Dart) and some other HTML, etc. Essentially my Angular.dart app is just a component within the page.
However, now all links on the page seem to want to go through Angular.dart routing. I don't even need routing (though have a few defined) technically.
Is there a way to disable the routing altogether? So that when clicking on Another page actually works like normal, changing the URL in the address bar? Right now it's just going to # and all my links are disabled. I wasn't even using ng-click or anything like that either.
How can I make Angular.dart just leave those links alone?
Thanks.
Since route_hierarchical-0.4.19 you can simply add a target="_self" to your <a href="...."> to avoid angular router.
You can reduce the scope of Angular in your page by putting ng-app on the element where Angular.dart is used. Thus, the links outside of this element will work.
link
<div ng-app>
link
</div>
For links inside Angular part there's perhaps a native way to handle them but you can add a directive that handle onClick on the element and performs window.location.assign('link').
Is there any good way to build Dart app with Web-UI and dynamically loading over network new HTML templates (client side templating)?
It looks like Web UI templates are always load together with generated *.js files:
<head>
<!-- this will be transformed by WebUI compiler to *_generated.js code -->
<link rel="components" href="common_templates.html">
</head>
Currently it's not possible to dynamically load and process templates with WebUI. WebUI needs to process the templates ahead of time. I think #ChrisBuckett suggestion from the other answer/comments would be a great way to go: use deferred loading when it becomes available.
Another crazy idea would be to ship the web-ui compiler with your app and process the templates in the browser. Note, this is not even possible today because web-ui currently cannot be compiled with dart2js (it has some dependencies on dart:io). Hypothetically, if it were possible, it's likely going to be a lot bigger than shipping the extra templates. So, if your goal was to reduce the initial download, then this idea is a no-go.
I am working toward a single page application that dynamically loads new content into the content section of the page based on the menu selected on the left. The content section gets populated from a WebUi component, but it does happen dynamically, and it does happen client side. On the menu, I have something like;
<li> Active </li>
<li> Completed </li>
where i have the application respond to the hash changing when a menu item is clicked. They do something similar in the WebUi implementation of the ToDo app.
The content has a conditional template that loads a WebUi component based on the menu selected.
This may not be what you had in mind. Please provide more details if I am off track here.
It is now possible to performed delayed loading of Dart code. If your client side templates are implemented as Dart source, you can use the DeferredLibrary class.
A more detailed article will likely show up soon in the articles section of Dart website.
how to avoid cross site scripting in "ruby on rails"
i used the code below
and, i want to know, how and where do we check this script is working or not.
You should escape anything in your views that may be manipulated by a third party, such as attributes and parameters.
Given your example, I have created a user with the name <script type="text/javascript">alert("XSS")</script>. Assuming you're only validating the presence of a name, this would be valid.
<!-- Raw output -->
<script type="text/javascript">alert("XSS")</script>
Client viewing this page with JavaScript enabled will see the standard alert prompt. This demonstrates that I can inject aribtary JavaScript in to your view.
<!-- Escaped output -->
<script type="text/javascript">alert("XSS")</script>
Client viewing this page with JavaScript enabled will not see the standard alert prompt.
This is a technique you can use to verify whether or not a view is vulnerable to a cross site scripting attack.
An alternate option is to consider using HAML. HAML can be configured to always escape output unless you explicitly ask for it to be raw. I'm lead to believe this will be the default behaviour in Rails 3 using ERb.
If you want to add auto-escape to Rails 2.x, take a look at Michael Koziarski's rails_xss. Does exactly what you're looking for :)