I have seen quite a few similar questions but they all seem to be related to <p> tags and are not working for scripts.
The below snippet is a e-signable pdf - it is not rendering in here for some reason but if placed in a .html it would just be a basic pdf with 2 signable fields.
<script type='text/javascript' language='JavaScript' src='https://secure.eu1.echosign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhBErQXBc488fW6dc9TExmomSqMLibzpk1duAQnawv3c1xGBoAjI-zvPUGWe1goCLs0*'></script>
I receive the script via json and I am trying to embed it onto a html page on when it is returned. I am using ngSanitize This is what I have tried so far...
Angular:
vm.someFunction = function () {
$http({
url: 'https://api.eu1.echosign.com/api/rest/v5/widgets',
method: "POST",
data:
{
// ... json data
}
}).then(function (response) {
$scope.data = response.data;
$scope.script = {content : response.data.javascript };
}
)};
});
HTML:
<div ng-app="MyApp" ng-controller="MyCntrl as vm">
<p ng-bind-html="script.content"></p>
</div>
I have seen that link it is returning a javascript function as a string.
document.write('<iframe src="https://secure.eu1.echosign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhBErQXBc488fW6dc9TExmomSqMLibzpk1duAQnawv3c1xGBoAjI-zvPUGWe1goCLs0*&hosted=false&token=&firstName=&lastName=&nameEditable=true" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>');
you can do is eval:
eval($scope.script.content)
but there is a problem your webpage get overridden by the eval code.
the best way is to open a new tab, get the reference of opener property.
var newWindow = window.open();
newWindow.opener.window.eval($scope.script.content);
Solved using:
var myWindow = window.open("http://pdf.test/input.html");
myWindow.document.write($scope.script);
Related
I want to remove the dependency of Iframe from my application. What are the possible way I can call a different application URL other than using iframe, object or html embeded variable.
I am trying something like this.
<body>
<a class="ajax" href="http://www.google.com">
Open in Modal Window
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none" class="Waiting"></div>').appendTo('body');
dialog.dialog({
close: function(event, ui) {
dialog.remove();
},
modal: true
});
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.removeClass('Waiting');
}
);
return false;
});
});
</script>
</body>
sorry can't comment
assuming there's no no anti CSF or similar measures on the target website you can use JavaScript ajax
or do it server side by grabbing the site
for better help describe what you're trying to archive what you did providing sample code if possible
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
I am having a problem with retrieving JSON feeds to use in a widget.
I have googled the hell out of it and just seem to be confusing myself more.
I have this code
function insertReply(content) {
document.getElementById('holder').innerHTML = content.result;
}
// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);
from this post - Get JSON data from external URL and display it in a div as plain text
Which works great. However if I change the URL i get no response and no errors in the console.
new URL: http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG
Why does one work and not the other?
EDIT #Amit
Amit Sorry for being retarded but I am really new to JQuery and javascript. Where do you put these? I have
<!DOCTYPE html>
<html>
<head>
<title>Widget Holder</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</style>
</head>
<body>
<form runat="server">
<div id="holder"></div>
</form>
<script type="text/javascript">
$().ready(function () {
$.get("http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG", function (data) {
debugger;
$("#holder").html(data);
});
});
</script>
</body>
</html>
But still get this error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I managed to fix the issue using a PHP proxy to fetch the data. The proxy I have used can be found here http://benalman.com/code/projects/php-simple-proxy/examples/simple/
Thank you for all your help on this subject.
The script:
$().ready(function () {
$.get("http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOG", function (data) {
debugger;
$("#holder").html(data);
});
});
The html:
<form runat="server">
<div id="holder"></div>
</form>
is working for me.
I am trying to develop a program that will switch between url locations every 10 seconds and then loop back after going to the last url. Description below:
Display url1 for 10 sec
Display url2 for 10 sec
Display url3 for 10 sec
LOOP BACK TO URL (continuous loop)
I believe this can be done using settimeout and for loop. I do not have a complete understanding of settimeout and java for that matter so that is where I am currently stuck at. I have placed a code below but since I do not know how to use settimeout believe this is my first mistake.
If there is a better way to do this I am all ears. I have been trying java for 3 days because it needed to be do for a project at work so I am brand new to it and probably over my head.
<!DOCTYPE>
<html>
<body>
"urls"
<script>
var myurl;
function urls()
{
myurl=setTimeout(url1,0);
myurl=setTimeout(url2,10000);
myurl=setTimeout(url3,20000);
}
function url1()
{
<embed width="100%" height="100%" name=plugin src="http://files.asme.org/ICOMES/News/15876.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url2()
{
<embed width="100%" height="100%" name=plugin src="http://www.tbp.org/pubs/Features/Su04McMasters.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url3()
{
<embed width="100%" height="100%" name=plugin src="http://milproj.dc.umich.edu/publications/EngFlex_report/download/EngFlex%20Report.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
</script>
</body>
</html>
edit:
<!DOCTYPE>
<html>
<body>
<script>
var urlList = ['http://www.google.com', 'http://www.msn.com', 'http://www.yahoo.com'];
var wnd;
var curIndex = 0; // a var to hold the current index of the current url
function openWindow(){
wnd = window.open(urlList[curIndex], '', '');
setTimeout(function () {
wnd.close(); //close current window
curIndex++; //increment the index
if(curIndex < urlList.length) openWindow(); //open the next window if the array isn't at the end
}, 2000);
}
openWindow();
</script>
</body>
</html>
It's not java. It's javascript ;)
You can do one iframe in an HTML and use javascript to change it's source every 10 seconds.
For example:
<html>
<body>
<iframe id="theIframe" src="">
</iframe>
</body>
<script>
function timeout() {
setTimeout(function () {
document.getElementById("theIframe").src= 'http://www.google.com';
timeout();
}, 10000);
}
timeout();
</script>
<html>
I am not sure this exact code will work because I just wrote it without test. But you can get the general idea. Like this every 10 seconds it will reload google. You can modify it so the websites are taken from an array or something.
Not all browsers will support opening the PDF directly in browser though. Some might want to download it - depending on plugins. If you want to render the PDF it might require external libraries.
I would like to render Json to angularJs in my view, so in a file events.scala.html I have this :
#(events: play.api.libs.json.JsValue)
#events
And it works fine, my Json data is displayed on my page.
But I would like to transmit this Json to angularJs, I would like to do something like this :
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = </script> #events <script>
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
How should I proceed?
Have you tried not to close the script tag ?
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = #events ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
the play templates will be rendered before the javascript is interpreted in the browser so the above will be transformed as
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = [{name:"event1"},{name:"event2"}] ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
once the browser receives it, it will interpret it. If the above is a valid angular program there is no reason it shouldn't work.