I'm using Low-code platform based on Flutter to develop my app and that platform have Built-in widgets such as (WebView widget "accepts URL") and planning to use it to display Tradingview Widgets
Platform
The widget
singalticker.html Code
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">EURUSD Rates</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
{
"symbol": "FX:EURUSD",
"width": 350,
"colorTheme": "light",
"isTransparent": false,
"locale": "en"
}
</script>
</div>
<!-- TradingView Widget END -->
So, I've managed to create a html page in GitHub and publish it and then placed its URL in the WebView and its works BUT what I'm asking is how to pass a value through the URL to change the pair
"symbol": "FX:EURUSD",
so when the user choose a pair of (Stock/Fiat) the html page changes depends on that ?
I've tried following multiple solutions here but nothing works !
Any help in this matter will be appreciated thanks
With this you can get query variable from URL string;
// add this function in your page script
function GetQueryVar(variable) {
var query = window.location.search.substring(1)
var vars = query.split('&')
for (var i = 0; i < vars.length; i++) {
var qPair = vars[i].split('=');
if (decodeURIComponent(qPair[0]).toLowerCase() == variable.toLowerCase())
return decodeURIComponent(qPair[1]);
}
}
How to use:
// url is: https://siteurl.com/page?fx=EURUSD
const fx = GetQueryVar('FX') // fx == 'EURUSD'
UPDATE 1
<body>
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright" id="view"></div>
</div>
<script type="text/javascript">
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
const container = document.getElementById("view")
const symbol = getParameterByName('fx')
document.addEventListener('DOMContentLoaded', function () {
var iframe = document.createElement('iframe')
iframe.setAttribute(
'src',
`https://s.tradingview.com/embed-widget/single-quote#{"width":350,"symbol":"FX:${symbol}","isTransparent":false,"height":126,"utm_source":"","utm_medium":"widget","utm_campaign":"single-quote"}`,
);
iframe.setAttribute('scrolling', 'no')
iframe.setAttribute('allowtransparency', 'true')
iframe.setAttribute('frameborder', 0)
iframe.setAttribute('style', 'box-sizing: border-box; height: calc(94px); width: 350px;')
container.appendChild(iframe)
});
</script>
</div>
</body>
Related
My lack of experience with both Wordpress and Javascript is tripping me up.
I have a Wordpress page that has a Jotform embedded using this tag:
<script type="text/javascript" src="https://form.jotform.com/jsform/FORMCODE"></script>
But I have a value coming into my Wordpress through the URL that I need to pass along in the embedded Jotform's URL. I cannot figure out how to do that. Do I want to use PHP? Javascript?
I tried this, which didn't work at all:
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
Thanks for any help!
To add a javascript code to a WordPress page you need the page id else the js code will be on all the pages.
You can either add the js code to the head of the page likes so:
add_action('wp_head',function () {
// 10 is the page id;
if (is_page ('10')) {
?>
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
<?php
}
}
);
Then put the js code on the footer like so:
add_action('wp_footer',function () {
// 10 is the page id;
if (is_page ('10')) {
?>
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
<?php
}
}
);
Whichever snippet you pick should be added to your theme functions.php or code snippet plugin if you have one
I've been working on the Search CRUD using Google WebApp Script via watching a YouTube tutorial, I'm almost done but I'm stuck in a place I couldn't figure out to sort the issue.
I want to load the search field and the data on first page load. but based on this code I need to click on the Search Tab and then get the search field to find the data. How do I get rid of the Search Tab and get straight into the search bar and data.
On Page load
Second Occurrence (After the Click)
My code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.nav-link {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<div class="nav-link"id="search-link">Search</div>
</li>
</ul>
<div id="app"></div>
<!-- Content here -->
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var data;
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById("app").innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function setDataForSearch(){
google.script.run.withSuccessHandler(function(dataReturned){
data = dataReturned.slice();
}).getDataForSearch();
}
function search(){
var searchinput = document.getElementById("searchinput").value.toString().toLowerCase().trim();
var searchWords = searchinput.split(/\s+/);
var searchColumns = [0,1,2,3,4,5,6,7];
// and or
var resultsArray = data.filter(function(r){
return searchWords.every(function(word){
return searchColumns.some(function(colIndex){
return r[colIndex].toString().toLowerCase().indexOf(word) !== -1
});
});
});
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
resultsArray.forEach(function(r){
var tr = template.cloneNode(true);
var hinmokuColumn = tr.querySelector(".hinmoku");
var buhinCodeuColumn = tr.querySelector(".buhinCode");
var buhinNameColumn = tr.querySelector(".buhinName");
var hitsuyoColumn = tr.querySelector(".hitsuyo");
var genkaColumn = tr.querySelector(".genka");
var kobaiColumn = tr.querySelector(".kobai");
var sagakuColumn = tr.querySelector(".sagaku");
var kenshoColumn = tr.querySelector(".kensho");
hinmokuColumn.textContent = r[0];
buhinCodeuColumn.textContent = r[1];
buhinNameColumn.textContent = r[2];
hitsuyoColumn.textContent = r[3];
genkaColumn.textContent = r[4];
kobaiColumn.textContent = r[5];
sagakuColumn.textContent = r[6];
kenshoColumn.textContent = r[7];
searchResultsBox.appendChild(tr);
});
}
function loadSearchView(){
loadView({func:"loadSearchView", callback: setDataForSearch});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
function inputEventHandler(e){
if (e.target.matches("#searchinput")){
search();
}
}
document.getElementById("app").addEventListener("input",inputEventHandler);
</script>
</body>
</html>
Server Side Code
function getDataForSearch(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Array");
return ws.getRange(2, 1, ws.getLastRow(),8).getValues();
}
I need to type letters in order to data display.
Screen Shot 3
Issue:
There are some actions that are currently happening when the Search tab is clicked.
You want these actions to happen when the page loads.
Solution:
In the HTML you provided, there's a click event listener attached to the Search tab you mention (id="search-link"):
document.getElementById("search-link").addEventListener("click",loadSearchView);
This means the function loadSearchView is gonna execute when the Search tab is clicked.
If I understand you correctly, you want loadSearchView to execute when the page loads. In that case, you could just add the following event listener:
window.addEventListener("load", loadSearchView);
Notes:
Since you didn't provide server-side code, I cannot know whether loadSearchView will do what you intend it to do. This solution just makes sure loadSearchView is executed when the page loads.
If you want to get rid of the Search tab, just remove it from your HTML (<div class="nav-link"id="search-link">Search</div> and its container elements).
Reference:
Window: load event
I seem to be having a somewhat similar issue to "HtmlUnit Class Cast Exception: TextPage cannot be cast to HtmlPage"
But am not able to use some of the tips such as HTMLParser.parseHtml. I think the interface has changed for it.
My main problem is not getting back the updated javascript from the webClient. The page text is only the original source in the .html file invoked with getPage(url). It also is only in TextPage format and cannot convert to HtmlPage. These two issues are likely related.
Here is my Java source:
String url = action.getScriptURL();
System.out.println("url:"+url);
// tried .CHROME as well as leaving default
try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX)) {
webClient.getCache().clear();
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setJavaScriptEnabled(true);
webClient.setAjaxController(new NicelyResynchronizingAjaxController());
webClient.getOptions().setThrowExceptionOnScriptError(true);
Page page = webClient.getPage(url); // should have javascript updates here, but maybe not yet
// not valid: HtmlPage htmlPage = (HtmlPage)webClient.getPage(url);
//String pageStr = htmlPage.asText();
webClient.waitForBackgroundJavaScript(10000);
int tries = 5; // Amount of tries to avoid infinite loop
while (tries > 0) {
tries--;
System.out.println("trying again: "+tries);
try {
synchronized(page) { // page
page.wait(20000); // How often to check - page
}
} catch(Exception ex) {
System.out.println("exception waiting for page"+ex);
}
if (page.getWebResponse().getContentAsString().contains("f_collectionLib"))
break;
page2 = webClient.getWebWindows().get(0).getEnclosedPage();
System.out.println("HTML page?:"+page2.isHtmlPage());
}
boolean hasUpdate = page.getWebResponse().getContentAsString().contains("Collection Library");
System.out.println ("html page hasUpdate:"+hasUpdate);
webClient.close();
}
So why is my content from the server not in htmlPage format?
And why is it not updated?
I can go to the same html URL in my browser and go into debug and see the JavaScript has been run there.
html in debug on Chrome
screen after accessing URL directly in Chrome
When I use page.getWebResponse().getContentAsString() it returns the same text as is in the original .html file.
I feel like I have tried all the tips I have found on waiting and setting options. I am obviously missing something...
For getting the results in htmlPage format,
If I try to convert it to htmlPage, I get this error:
Exception in thread "main" java.lang.ClassCastException: com.gargoylesoftware.htmlunit.TextPage cannot be cast to com.gargoylesoftware.htmlunit.html.HtmlPage
at com.ibm.PDIScript.runDojoChart.export(runDojoChart.java:395)
at com.ibm.PDIScript.runDojoChart.main(runDojoChart.java:154)
i
body of the html:
<body class="claro histTheme">
<!--catch JavaScript errors for later retrieval -->
<!-- to capture use: ((JavascriptExecutor) driver).executeScript("return window.jsErrors");-->
<script type="text/javascript">
window.jsErrors = [];
window.onerror = function(errorMessage) {
window.jsErrors[window.jsErrors.length] = errorMessage;
}
</script>
<!-- set Dojo configuration, THEHn load dojo.js -->
<script>
var dojoConfig = {
async: true,
has:{'dojo-bidi': true},
//dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, "") + "/blank.html",
packages: [{
name: "hist",
location: "/SystemiNavigator/com/ibm/as400/pt/hist"
},{
name: "dojoChart",
location: "/SystemiNavigator/com/ibm/as400/pt/dojoChart"
}
]
};
</script>
<!-- load dojo FIRST -->
<script type="text/javascript" src="/auiruntime8106/dojo/dojo/dojo.js" ></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"hist/utils",
"dojoChart/DojoGraphScript",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojox/layout/TableContainer",
"dijit/form/TextBox",
"dijit/form/CheckBox",
"dijit/form/Textarea",
"dijit/form/NumberSpinner",
"dijit/form/FilteringSelect",
"dijit/form/TimeTextBox",
"dijit/form/DateTextBox",
"dijit/form/Button",
"hist/widget/SelectableChart",
"dijit/form/Button",
'dojo/dom', 'dojo/on', 'dojo/domReady!'
], function(parser,ready,utils,DojoGraphScript) {
ready(function(){
// Invoke the dojo/parser to process the dijit layout widgets specified in the body declaratively
parser.parse();
var rtl = utils.isRTL();
if(rtl){
dijit.byId("mainBC").dir = 'RTL';
dojo.style(dijit.byId("mainBC").domNode,"direction","rtl");
dijit.byId("TitleBar").dir = 'RTL';
dijit.byId("titleLeftPane").dir = 'RTL';
dijit.byId("titleCenterPane").dir = 'RTL';
dijit.byId("titleRightPane").dir = 'RTL';
dijit.byId("titleRightActionPane").dir = 'RTL';
dijit.byId("leftPane").dir = 'RTL';
dijit.byId("leftTopPane").dir = 'RTL';
dijit.byId("leftTopTitlePane").dir = 'RTL';
dijit.byId("leftBottomPane").dir = 'RTL';
var link2 = document.createElement("link");
link2.type = "text/css";
link2.rel = "stylesheet";
link2.href = "/auiruntime8106/dojo/gridx/resources/claro/Gridx_rtl.css";
document.getElementsByTagName("head")[0].appendChild(link2);
} else {
var link2 = document.createElement("link");
link2.type = "text/css";
link2.rel = "stylesheet";
link2.href = "/auiruntime8106/dojo/gridx/resources/claro/Gridx.css";
document.getElementsByTagName("head")[0].appendChild(link2);
}
var pGraph = new DojoGraphScript({isRTL: rtl});
pGraph.postCreate();
console.debug("pGraph.postCreate()");
});
});
</script>
<!-- load dojo -->
<div data-dojo-type="dojoChart/DojoGraphScript" ></div>
<div data-dojo-type="dijit.layout.BorderContainer" id="mainBC" data-dojo-props="region:'center'">
<div data-dojo-type="dijit.layout.BorderContainer" id="TitleBar" data-dojo-props="region:'top'" style="height:30px; background-color:#cce6ff;">
<div data-dojo-type="dijit.layout.ContentPane" id="titleLeftPane" data-dojo-props="region:'leading'" style="width:140px;padding:0px;background-color:#cce6ff; border:none;overflow:hidden;">
<div id="ActionButton" style="padding:0px;"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="titleCenterPane" data-dojo-props="region:'center'" style="padding:0px;background-color:#cce6ff; border:none;">
<div id="Title" style="padding-top:6px;"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="titleRightPane" data-dojo-props="region:'trailing'" style="width:30px;padding:0px;background-color:#cce6ff; border:none;"></div>
<div data-dojo-type="dijit.layout.ContentPane" id="titleRightActionPane" data-dojo-props="region:'trailing'" style="width:40px;padding:0px;background-color:#cce6ff; border:none;"></div>
</div>
<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="region:'center',splitter:'true'">
<div data-dojo-type="dijit.layout.ContentPane" id="leftTopPane" data-dojo-props="region:'top'" style="height:150px;border:none;">
<div data-dojo-type="dijit.TitlePane" id="leftTopTitlePane">
<div id="filtersTableContainer" style="width:925px;overflow:auto;"></div>
<div id="buttonsContainer"></div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftBottomPane" data-dojo-props="region:'center'" style="padding:0px;">
<!-- id="selectableChartContainer" style="width:100%;height:100%;" -->
<div id="chartGridContainer" style="width:100%;height:100%;overflow-y:auto"></div>
</div>
</div>
</div>
</body>
</html>
DojoGraphScript.js constructor and postCreate:
constructor: function(args ){
var urlParms = utils.getUrlParms();
this.packageId = urlParms.packageId;
this.perspectiveId = urlParms.perspectiveId;
this.basePerspId = urlParms.basePerspId;
this.perspectiveName = urlParms.perspectiveName;
this.colName = urlParms.collectionName.trim();
this.library = urlParms.collectionLib.trim();
this.colType = urlParms.collectionType.trim();
this.colFormat = urlParms.collectionFormat.trim();
this.fileLevel = urlParms.fileLevel;
this.startTime = urlParms.startTime;
this.endTime = urlParms.endTime;
this.systemName = urlParms.systemName.trim();
this.release = urlParms.release;
this.GUIInterval = urlParms.GUIInterval;
this.collectionInt = this.GUIInterval;
console.log("collectionName:"+this.colName+ " type:"+this.colType+" format:"+this.colFormat);
if(this.GUIInterval == undefined || this.GUIInterval == "---"){
this.GUIInterval = -1;
}
this.viewType = 'dojo';
this.viewNum = 1;
console.log("Constructor dojographscript.js");
lang.mixin(this, args);
},
/** postCreate - function called after DOM has been created" +
* This is where it all begins.
*/
postCreate: function(){
console.log("postCreate dojographscript.js");
dijit.byId("leftTopTitlePane").set("Title","TITLE:helloWorld");
dom.byId("buttonsContainer").innerHTML = "Hello World";
/* dijit.byId("leftTopTitlePane").watch("open", function(param, oldValue, newValue) {
var leftTopPane = dijit.byId("leftTopPane");//border container
leftTopPane.resize({h: (newValue ? 150 : 28)});
dijit.byId("leftPane").resize(); //
});
aspect.after(registry.byId("leftPane"), "resize", function(changeSize, resultSize){
if(resultSize != undefined && resultSize[0] != undefined && resultSize[0].w != undefined){
var leftTopTitlePane = dijit.byId("leftTopTitlePane");
leftTopTitlePane._layout({w: resultSize[0].w});
}
});
*/
var args = '{action: "helloWorld", perspectiveId: this.perspectiveId}';
this.processHelloWorld(args);
//var args = {action: "getContextMri", perspectiveId: this.perspectiveId};
//var callbackFunc = dojo.hitch(this,'processContextInfo');
// console.log("before exit postCreate dojographscript.js");
//this.callServer(null,args,callbackFunc); // calls for context panel
},
processHelloWorld: function(theJsonString) {
this.theJsonString = theJsonString;
console.log("json string 11.0:"+theJsonString);
//document.write("<div>" +"11 args"
// + "<div>"+theJsonString+"</div><div>");
},
I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.
I am trying to add Disqus to my Ionic/Cordova app. I have successfully got the Disqus widget to appear in a template using an iframe but if I click on the Disqus widget to login to Disqus to add a comment, or look at the Disqus community tab, for example, then the app goes to a non scrollable Disqus page that fills all of the screen and there is no way to get back to the app.
Is there a way to make the page it goes to scrollable and smaller than the screen so the user can get back into the app.
The Disqus code server on a static server is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
var params;
var disqus_url;
var disqus_title;
var disqus_shortname;
var disqus_identifier;
window.onload = function () {
var match,
pattern = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
query = window.location.search.substring(1);
params = {};
while (match = search.exec(query))
params[decode(match[1])] = decode(match[2]);
if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
alert("Required arguments missing");
}
else {
loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
}
};
function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
if (identifier !== undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
blog comments powered by <span class="logo-disqus">Disqus</span>
</body>
</html>
In my app's controller I have:
var disqus_title = "TEST";
var disqus_identifier = '/movie/' + 0;
var disqus_url = 'http://example.com/movie/' + 0;
var url = "http://example.com/disqus.html?";
$scope.disqusurl = url + "shortname=example&url=" + encodeURIComponent(disqus_url) +
"&title=" + encodeURIComponent(disqus_title) + "&identifier=" + encodeURIComponent(disqus_identifier);
$scope.disqusurl = $sce.trustAsResourceUrl($scope.disqusurl);
The relevant part of the template file looks like this:
<ion-content>
...
<iframe style="max-height: 40%;" src="{{disqusurl}}"></iframe>
...
</ion-content>
EDIT
The problem seems to be that the web links in the Disqus widget are launched within the app. If somehow the links could be made to open in an external browser then all might work fine but I can't see how to make pulled in HTML code work this way.
Here's what I would try:
1) try to over ride disqus's css using !important selector
2) try to load in content with ajax
3) search and read articles like this: https://help.disqus.com/customer/portal/articles/472096-using-disqus-in-mobile-apps
4) have an iframe to a page on your website that has disqus, and make the iframe smaller than page height.