I am trying to put some HTML code into iframe to present data. Everythink works fine, but when I want to put any java script in an iframe there is no result. It seems that iframe cannot see any local javascript.
Here is a code:
<html>
<head>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="testJSON.js"></script>
</head>
<body>
<iframe id="frame"></iframe>
<p id="demo"></p>
<script src="names.js"></script>
<script type="text/javascript">
$("#frame").attr(
"src", "data:text/html;charset=utf-8," +
"<html><head>"+
"<script src='jquery.min.js'><"+"/script>"+
"<script src='testJSON.js'><"+"/script></head>"+
"<body><p id='demo'></p>"+
"<script src='name.js'><"+"/script>"+
"<h1>Test</h1>"+
"</body></html>"
);
</script>
</body>
</html>
testJSON.js:
var dane = '{ "names" : [' +
'{ "firstName":"Ana" , "lastName":"Doe" },' +
'{ "firstName":"Bill" , "lastName":"Smith" },' +
'{ "firstName":"Dory" , "lastName":"Jones" } ]}';
names.js:
var nameID =function() {
return 2;
};
obj = JSON.parse(dane);
document.getElementById("demo").innerHTML =
obj.names[nameID()].firstName + " " + obj.names[nameID()].lastName;
Has anyone have a solution to this problem?
Thank you
I assume DataURIs cannot contain external scripts for security reasons but I cannot find the duplicate SO post that confirms this. Anyway, document.write the html and script into the frame. That works
$("#frame")[0].document.contentDocument.write(
"<html><head>"+
"<script src='jquery.min.js'><\/script>"+
"<script src='testJSON.js'><\/script></head>"+
"<body><p id='demo'></p>"+
"<script src='name.js'><\/script>"+
"<h1>Test</h1>"+
"</body></html>"
);
$("#frame")[0].contentDocument.close();
you may need to fully qualify the URLs of the external files
Thats a race problem: youre trying to access the json, before the iframe is loaded, therefore, dane will be undefined. Use listeners or kinda callback.
Callback:
//in your page:
function parse(json){
//do sth with json
}
//in the iframe:
parse("{}");
Listeners:
document.getElementsByTagName("iframe")[0].onload=function(){
//you parsing js
};
Related
I know there are numerous resource that covers this topic but I couldn't find one that matched my problem completely. I am trying to pass $filemanagerToken to post_editor.js. Here is what I have;
In index.php i have the following script:
$filemanagerToken = '123456';
$this->data['scripts_admin'] = '
<!-- Scripts Admin -->
<script src="//cdn.ckeditor.com/4.16.0/full/ckeditor.js"></script>
<script src="'.base_url().'/assets/admin/post/js/post_editor.js">
var fmKey = '.json_encode($filemanagerToken).';
</script>';
And in post_editor.js, I have the following;
CKEDITOR.replace( 'post_body' ,{
filebrowserBrowseUrl : '../../filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
filebrowserImageBrowseUrl : '../../filemanager/dialog.php?type=1&editor=ckeditor&fldr=&akey=fmKey' ,
});
I just cannot understand how to echo out fmKey above. Any guidance appreciated. I tried but get a parse error.
I am trying to embed an iFrame within several WordPress pages. Each page will use a different iFrame content. This is for a commerce site so needs the first iframe to be the customer's login. Subsequent iframes on different WP pages will be for product search, checkout... ((my question is at the bottom))
In the header.php I placed some initial code that i need to be included on every WordPress page.
I added the iframe within each page's body.
I need to initialize the iframe to a specific iframe content. I would like to place this code AFTER the closing </body> tag as follows:
<html>
<head>
<script>
var absDomain = "http://www.webstore.com/"
var iframeObj;
var timestampString = '' + new Date().getTime() + ''
document.write('<script type="text/javascript" src="' + absDomain + 'Support.js?'+timestampString+'"><\/script>');
document.write('<script type="text/javascript" src="' + absDomain + 'ProductSearch.js?'+timestampString+'"><\/script>');
document.write('<script type="text/javascript" src="' + absDomain + 'Environment.js?'+timestampString+'"><\/script>');
function gotoIframe(theLocation){
var timeStamp = "";
iframeObj = document.getElementById("iframeContent");
timeStamp = "&" + new Date().getTime();
iframeObj.src = absDomain + theLocation + "?iframe=yes" + timeStamp;
}
function executeIFrameProductSearch(str1, str2){
goTo_CategoryForIframe(str1, str2, document.getElementById("iframeContent"));
}
</script>
</head>
<body>
<!-- iFrame embedded below -->
<iframe id="iframeContent" style="width:100%;height:500px; " src=""></iframe>
</body>
<script>
//script needed for initial iframe page and iframe support.
iframeObj = document.getElementById("iframeContent");
gotoIframe("CustomerLogin.html");
</script>
</html>
//After the above code section (after the </body> tag) is embedded into the Login page, I expect to use:
//Customer Login:
Customer Login
//Product Search:
Product Search
Question: Where do I insert the code that's AFTER the closing tag for each of my specific WordPress pages? Thanks.
It is invalid to put script tag after body tag, but if you really want to do that,
you can look into the theme's footer.php.
For example, you may find code like this in footer.php:
<?php
</div><!-- close tag for content container -->
?>
<footer>
<!-- footer content -->
</footer>
</body>
<!-- here is the place to put your code -->
</html>
Copy and paste this function in your functions.php file
//alert(); enable alert to test
//script needed for initial iframe page and iframe support.`function your_function() {
echo '<script>`
iframeObj = document.getElementById("iframeContent");
gotoIframe("CustomerLogin.html");
</script>';
}
add_action( 'wp_footer', 'your_function', 100 ); // this will add the script after the body tag for every pages
other option will be
// Rest of your functions.php above this line or wherever!
function yourprefix_scripts_after_opening_body_tag() {
$javascript = file_get_contents( get_template_directory() . '/js/opening-body.js' );
echo '' . $javascript . '';
}
add_action( 'yourprefix_after_opening_body_tag', 'yourprefix_scripts_after_opening_body_tag' );
paste this code in footer.php where you want to display
Given a web page with JavaScript code, I would like to generate a resulting html automatically (either via CLI tool OR using some library in some language)
For example, given test.html
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
I would like to get as a result
<html>
<body>
<p id="demo">Hello JavaScript!</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
After a quick search, it looks like watin will do what you want.
It's aimed at automated testing, but when it hits a page it will execute all js as well as ajax calls etc. Looks like you can grab the resulting html from it too.
The answer is based on the comment of #torazaburo
In fact, the phantomjs is capable of evaluating javascript and producing html.
Here is how it could look like, executing phantomjs load_page.js path_to/test.html
var page = require('webpage').create(),
system = require('system'),
page_address;
var fs = require('fs');
if (system.args.length === 1){
console.log('Usage: phantomjs ' + system.args[0] + ' <page_to_load:http://www.google.com>');
phantom.exit();
}
page_address = system.args[1]
page.open(page_address, function(status){
console.log('Status:' + status);
if (status === 'success' ){
fs.write('phantom_result.html', page.content, 'w')
}
phantom.exit();
});
I have a page containing a set of hyperlinks. Clicking on any of the hyperlinks should take the user to a new page with the url sent as POST data.
What I am able to do:
1. Open the new page.
What issues I am facing:
1. In the new page, I am trying to access the url that was sent across as data. The url is not visible. Where am I going wrong?
The code I have so far:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function takeMeHome(obj) {
var URL = obj.getAttribute("href");
//alert("Url = " + URL + " with id = " + obj.id);
console.log("URL = " + URL);
$.ajax({
type: 'POST',
url: './bbCloud.php',
data: {'tgt_url': URL},
success:function(data) {
console.log("Function invoked. It seems posting data was a success");
window.location = URL;
//alert('This was sent back: ' + data);
}
});
return false;
}
</script>
</head>
<body>
<p>
Choose one of the links below to access content:</p>
<p>1. Email Etiquette</p>
</body>
</html>
bbCloud.php:
<?php
//the function below displays data from bbMainPage javascript.
function getDataFromLibrary() {
$tgt_url = $_POST["tgt_url"];
echo "Data received = " . $tgt_url . "<br/>";
return $tgt_url;
}
?>
<html>
<head>
<style>
.hlight{background-color:#ffcc00;}
textarea {
width:100%;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://myDomain/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
//mention all global variables here.
console.log("this is the start of javascript");
//get all data from the previous script.
var tgtURL = "<?php getDataFromLibrary(); ?>";
console.log("URl obtained = " + tgtURL);
</script>
<body>
<div>
<audio id="playText" src="" controls></audio>
</div>
</body>
</html>
try dynamically creating and submiting a form instead of trying to ajax it:
<script type="text/javascript">
function takeMeHome(obj) {
var URL = obj.getAttribute("href");
$('<form>', {
"html": '<input type="text" name="tgt_url" value="' + URL + '" />',
"action": URL
}).appendTo(document.body).submit();
}
</script>
Hmm, if I recall correctly, what is happening is that your $.ajax does indeed send the POST data to your php file. The problem is, that it sends the post data, the php file is executed, and a response is sent back, but its sent back to the $.ajax call itself. You THEN redirect to the php file (and thus run it again), but without the post data coming along. Also, something along the lines of $.('a').click(function(event) { event.preventDefault(); } might be a good idea. I'll try and make a better answer for you when I get home (currently on my phone, shouldn't be long).
Safari ignores the a href link. Other browsers pass the countClicks function AND pass the link to open the new browser window. Any suggestions?
The JavaScript source is as follows:
<script language="JavaScript" type="text/JavaScript">
function countClicks(enterprise_code,sid_code,buspart_id,prod_id,server_name,path_info,query_string)
{
window.location.href = "/sharedInc/cf/polTrack.cfm?Buspart_id=" + buspart_id + "&Enterprise_Code=" + enterprise_code + "&Sid_Code=" + sid_code + "&Prod_id=" + prod_id + "&Server_Name=" + server_name + "&Path_Info=" + path_info + "&Query_String=" + query_string;
}
</script>
Whereas the HTML markup is:
Link
Try with either document.location.href or just location.href .
Hey there. Your code should work. Well i tried this simple example on Safari browser and it works good. Try yourself.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function countClicks()
{
window.location.href = "http://www.stackoverflow.com";
}
</script>
</head>
<body onLoad=countClicks()>
</body>
</html>
Anchor Property : FYI : I have used window.open
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function countClicks()
{
window.open("http://stackoverflow.com", "_blank");
}
</script>
</head>
<body>
Visit StackOverflow Website
</body>
</html>
Passing variables from function
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function countClicks(a,b)
{
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
}
</script>
</head>
<body>
test
</body>
</html>
Remove the url from href and pass the url to the function which you are calling on onclick.
Inside this function, you can simply use window.open(your_url) to open the link in new tab.
So, this will solve your problem.
Here is the sample :
<script language="JavaScript" type="text/JavaScript">
function countClicks(enterprise_code,sid_code,buspart_id,prod_id,server_name,path_info,query_string,new_site_url)
{
window.open(new_site_url);
window.location.href = "/sharedInc/cf/polTrack.cfm?Buspart_id=" + buspart_id + "&Enterprise_Code=" + enterprise_code + "&Sid_Code=" + sid_code + "&Prod_id=" + prod_id + "&Server_Name=" + server_name + "&Path_Info=" + path_info + "&Query_String=" + query_string;
}
and here is your anchor tag :
< a href="javascript:void(0)" onclick="countClicks('POL','POL',6808,387,'www.princetonol.com','/index.cfm','x=x&at=no','http://www.polclients.com')">Link< /a>
So, this code will open a new tab (with the url you provide)
and after opening the tab, window.location will work as usual.
Hope, this will help you.