Javascript Alternative to Iframe? - javascript

I am an admin on an online roleplaying game, and we recently made the transition from some sort of Frankencode to javascript. While I have the basics down, there is a problem I have encountered that I am not sure how to fix.
We have macros on the game, where you can move multiple rooms by typing the direction with a space, a semi-colon, and another space between directions. I've created an atlas that has a long list of macros to help the players of the game move around faster and more efficiently. My main problem is, everything worked with the Frankencode, but Javascript is not recognizing the iframe in my new code.
I would really like an alternative to iframes where I don't have to rely on an outside website for this script, but my journey into that hopeful line of thought just led to a bunch of bright red, angry errors and the command breaking. I substituted the iframe for a contentedtable and the game just was not having it!
Below is my code. Keep in mind that everything works except the iframe.
Thanks in advance! :)
var macaroni = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
var macaroons = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
function command(person, totalcommand) {
if (person.isAttribute("macaroons"))
{
person.personal(macaroons);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
person.personal(macaroni);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}

The alternative to iframes is AJAX(Asynchronos Javascript and XML) which lets you load pages and data from a server and you can handle the results for that and insert the response back into your page.
The best pages for learning about Javascript are from the Mozilla Developer Network and this link especially will help you learn more about ajax.
However there are libraries you can download, such as jQuery that help simplify a lot of tasks including loading and storing html and more.
If you need to store a website you can do the following:
Include jQuery in the HEAD:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Create a div(or other container for storing) with any id you want(should be unique):
<div id="loadingArea"></div>
Include a script at either the end of the page or end of the head to ensure that jQuery has loaded
<script>
$(document).ready( //Will run the following function when the html document is ready
function() {
var url = "http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm"; //Load the page you want.
var portion = "body >" //select the portion of the page you need to eliminate duplicate html, head, and body tags
//This is a jQuery selector similar to css meaning select all children (>) of body
//Here we tell jQuery to select the element with id(#) loadingArea and load the
//portion of the url.
$('#loadingArea').load(url+" "+portion);
}
); //End of ready call
</script>

Related

How to use an array in a text-to-speech script

Hello stackoverflow Community,
I am working on a Survey which uses Text-To-Speech components. Usually they look like this:
<img src="picture.jpg" border="1" input onclick="responsiveVoice.speak('spoken_Text_here', 'Deutsch Female');" class="button1"> Text_behind_Button?
Now, I have a Database with all the Elements which will be "spoken" (or: to be used in the TTS script) and insert them in my survey software with
$key = 'A1';
$tts = dbGet($key);
So far so good. Now I would like to take the first element of the array $tts und put it in the TTS script.
<img src="picture.jpg" border="1" input onclick="responsiveVoice.speak('<?php $tts[0] ?>', 'Deutsch Female');" class="button1"> Text_behind_Button?
As a result I would like, that when you click on the button, the script takes the string from the Database and inserts it the TTS code. This way above obviously doesn't work. So I guess that I have to change the array in a string which can be read. Unfortunatly, I dont have the knoledge how to do that.
Ideas, hints and criticism (more or less) are welcome!
Best wishes

Python Selenium view page source shows JavaScript but inspecting elements shows HTML elements

I'm trying to access links to attachments for a web automation project. The problem is that when I load the web-page via Chrome and inspect element, I can see HTML Code (divs and tables) but when I use the view source option, all I see is JavaScript functions.
Now when I try to access an element via selenium(which has access to source, the JavaScript Code) I can't find any element there. I cannot explicitly find the mention of iFrames, but I think the iFrames that contain this information are being loaded by the JavaScript Code. Is there a way to get access to the underlying HTML to find the elements and get access to the links?
NOTE : When I try to view the page source which is a collection of JavaScript functions, there are no links to a frame which can be followed to get the required HTML.
For context :
The inspect element looks like :
<div id="SectionAttachments">
<table summary="" border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td></td>
<td><img class="attachmentsIcon" src="images/modern_graphite/attachment_url.png" alt="Linked Resource" title="Linked Resource"></td>
<td class="attachmentTitle">
Customer View
</td>
<td>by</td>
<td class="attachmentAuthor contact_popover" ivalue="99832"></td>
<td class="attachmentDate"><span class="dateSpacer">-</span>10/25/2016 04:21:13 AM</td>
<td width="16">
<img align="middle" src="images/modern_graphite/edit.gif" alt="Edit this Attachment" title="Edit this Attachment" border="0">
</td>
<td width="16">
<script type="text/javascript">
if(this.eMail)
{
document.write( "<a href=javascript:eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' align='top' alt='Send E-mail' title='Send E-mail'></a>");
}
else if(parent&&parent.eMail)
{
document.write( "<a href=javascript:parent.eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' valign='bottom' alt='Send E-mail' title='Send E-mail'></a>");
}
</script><img src="images/modern_graphite/email.gif" border="0" align="top" alt="Send E-mail" title="Send E-mail">
</td>
</tr>
</tbody>
</table>
</div>
I want to extract the link at "LINK GOES HERE"
The Page source has no div with ID = "section attachments" or any other elements inside the div. (I searched with corresponding IDs, class names etc, no success)
What I have tried :
I tried to search the page source from the browser, no results.
My selenium code tries to search for these elements using XPath, it
returns no element found.
XPath expression :
driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a/#href")
I have tried putting my script to sleep in case the page isn't fully loaded, no effect.
Is there a way to get these links via selenium? Any help will be highly appreciated.
EDIT :
The problem was resolved by modifying the URL a bit to load a page that renders similarly but has iFrame tags that I can switch to and then find the elements using the same Xpath and get the links.
This page was being loaded after a few redirects from another page. A slight string modification of the URL (using replace in Python) solved the problem. Thanks to all who tried to help.
get element by -
ele = driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a")
then retrieve element attribute using -
ele.get_attribute('href')
Looks like there are few things that you may be mixing together:
When you view the page source in the browser, you're shown the html as it was sent from the server. This html can contain JavaScript that creates elements dynamically, but in the html itself you'd see only the JavaScript code that creates them.
The DOM which is what you see when you inspect element, is the current structure of the page. Initially it's pretty much the same as the html, but may include elements that were created or changed dynamically using JavaScript after the page was loaded from the server. This is also what Selenium interacts with.
(Not sure if you mentioned it, but for the sake of completeness) driver.page_source returns a string which represents that DOM (current state), but as a valid html format.
An html page can contain nested pages using the iframe tag. Each (parent or nested) page had its own html source and its own DOM. In Selenium you have to explicitly switch between them using the driver.switch_to method. Note that on the browser's dev tools though (ie, inspect element), the DOMs of all pages appear combined as one.

Presenting Cookies on a PHP based site

My PHP/HTML/Javascript skills are 0 but I have managed to create a site using a default template which I have modified.
What I am trying to accomplish is to have the browser print out the Cookie Name and Value if it exists. This is for a lab exercise that I'm currently working on. The lab itself is not how you program but rather how you configure Cookie Persistence and as part of the lab I want the student to easily display the cookie on the webpage.
Previous examples have been with HTML/JavaScript and the following code:
<script language="javascript">
function showCookieLink() {
var ele = document.getElementById("CookieLink");
ele.style.display = "block";
}
</script>
<BODY bgColor="#0066FF" onload="javascript:if (document.cookie) showCookieLink()">
<tr>
<td colspan="2" align="center" vAlign="top">
<font face=Arial>
<div id="CookieLink" style="display: none;"><b><font color=#0000f0>Display Cookie</b></div>
</font>
</td>
</tr>
This previous example have been brilliant. It will print out the clickable link "Display Cookie" (if a cookie exists) and when clicked it will pop up a new smaller window with the Cookie Name and Value.
For some reason this does not work anymore. I have tried several different browsers but they all act the same. JavaScript is enabled on the user.
I have been trying different types of preformatted-codes to fix this but none work (or I just suck at programming/scripting).
Can you guys please help me with this? Perhaps you can print out an example code that I can copy/paste into my current php code?
Thanks in advance!
According to this post, document.cookies will only work in a web server, not in just html that is served up from the file system. Does your url look like http://localhost or file:///your/file/here.html? It should look like the http:// one.
You also have some issues with your code. you dont close the second font tag, <script> should either be in a <head> or <body> tag, your <body> tag shouldn't be capitalized. Look here for a basic template.

Setting DOCTYPE With Server-Side Javascript

I have a real quick question. I want to set the DOCTYPE for an HTML Page but I need to do it using Server Side Javascript. Every answer I see on this site says "I don't see why you want to do it" but never answers the question (That I could find... please point me in the direction of a post if I am wrong).
The reason it needs to be done is because this is technically being sent as an HTML email. I am using ExactTarget and they won't allow me to type anything above the starting < HTML > tag. If I try to establish the DOCTYPE after it, it gets simply removed.
Now I DO have access to server side javascript before the email renders. I need to set this DOCTYPE because I am trying to set < td > tags to "display:block" and this will not work with the default DOCTYPE. So basically I need to write some script AFTER the opening < html > tag that will set the doctype for the page (email).
I wish to use the following DOCTYPE but if this is unwise feel free to advise:
<!DOCTYPE html >
Also here is the CSS not working with the current Doctype:
#media screen and (max-width: 660px) {
td {display:block !important;}
}
Here is the HTML:
<table bgcolor="#0033CC" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Top Content</td>
</tr>
<tr>
<td>Bottom Content</td>
</tr>
</table>
When I say server side Javascript here is my syntax:
<script type="text/javascript" runat="server">
*** MY SCRIPT ***
</script>
If ExactTarget won't let you output anything prior to the starting <html> tag, then you can't do this. The doctype has to come before that.

Javascript in HTMLPanel

I want to include Javascript code in a HTMLPanel element, but it is not working. Could you please help me? Thanks in advance.
Scripts/pro.js
alert('hello');
WITH HTMLPANEL DOES NOT WORK (no alert is displayed)
MyPage.java (which is EntryPoint for MyPage.html)
String preHtml="<script type=\"text/javascript\" src=\"Scripts/pro.js\"></script>";
HTMLPanel prePanel=new HTMLPanel(preHtml);
RootPanel.get("scriptContainer").add(prePanel);
MyPage.html
<td align="left" valign="top" id="scriptContainer"></td>
WITHOUT HTMLPANEL DOES WORK (alert is displayed)
MyPage.html
<td align="left" valign="top"><script type="text/javascript" src="Scripts/pro.js"></script></td>
I think it should be other way around. The HTMLPanel quoting the javadocs
A panel that contains HTML, and which can attach child widgets to identified
elements within that HTML.
should wrap your container not your script. The below example works unless you absolutely have a reason to use HTMLPanel to wrap a script.
HTMLPanel html = new HTMLPanel("<table><tr><td id='scriptContainer'></td></tr></table>");
RootPanel.get().add(html);
Element script = DOM.createElement("script");
DOM.setElementAttribute(script,"language","JavaScript");
DOM.setElementAttribute(script,"src","Scripts/pro.js");
DOM.appendChild(DOM.getElementById("scriptContainer"),script);

Categories

Resources