Can anyone help with this please?
I have a webpage with an asp.net frame on it- the frame shows the contents of an html document.
When someone clicks on a link in the html document, I need to show some content in another frame on the same page.
So, the question is, what should 'myTag' be in the following...
e.g.
//this is the contents of my html file`
<p>to be or not to be, <myTag>that</myTag> is the question</p>
Whatever 'myTag' is (maybe a piece of javascript? don't know), it should be able to fire an event on the server so I can send some more text to the other frame on the page
Any ideas?
thanks..
The first thing I would do is give the other frame an ID or some way to easily get to it with javascript. Then inside your iframe, you could do something like:
var other_frame_document = window.parent.document.getElementById('other_frame').contentWindow.document;
// example 1: set the HTML of the other frame from a string.
// this is usually a bad idea because of XSS.
other_frame_document.body.innerHTML = '<b>aloha</b>';
// example 2: better way is to manipulate the DOM in the other iframe
var elm = other_frame_document.createElement('b');
elm.appendChild(other_frame_document.createTextNode('aloha'));
other_frame_document.body.appendChild(elm);
that is one way to fire an action.
Or you can bind the action using jQuery (or some other library) when the DOM loads, like this:
jQuery("#myTagId").bind("click", function() { ... });
This will cause the event to fire when the element is clicked.
You can then use ajax to call the server to update the other frame.
Related
Basically a survey from SurveyMonkey is loading on my webpage in an iframe.That survey has 'Done' button which needs to be clicked when you have filled up the survey. Now when i inspect console by right-clicking on page anywhere except survey pop up and execute this statement:
document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");
The result i get is:
HTMLCollection []
But when i inspect on survey popup and write the same statement in console i get the following result:
HTMLCollection [button.btn.small.done-button.survey-page-button.user-generated.notranslate]
Basically i want to add an event when 'Done' button will be pressed but the problem is i cannot get reference to this button simply by passing its class because it loads after few seconds later when my html page is loaded.
I have even written a function to alert me 'Hi' when 'Done' button shows up button it is of no value.Here is the code:-
$('.btn small done-button survey-page-button user-generated notranslate').on('load',function(){alert('hi'); console.log("survey-loaded");});
Following is the html of 'Done' button:
<button type="submit" class="btn small done-button survey-page-button user-generated notranslate">DONE</button>
You cannot reference iFrame content from another domain. That will violate the Same-origin policy.
The mere idea of an iFrame is that it blocks you from manipulating its content, so the SurveyMonkey content still considered secured.
You can, however, interact with iFrame via post messages, and you can get a reference to iFrame content if it doesn't violate the same-origin policy.
See similar questions here, and here.
Try to access iframe elements after it is loaded.
document.getElementById('your-iframe-id').onload = function() {
// Create variable for your iframe.
var iframe = document.getElementById("your-iframe-id");
//then access its content like this
var btn document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");
//Rest of your code
}
The above code will only works if there is no cross domain restriction
Use a delegate, target a parent element that is always on the page the the addEventListener to it
document.querySelector('your-const- parent- `element-containing-the- button').addEventListener('click',(e)=>{
If(e.target.tagName === 'BUTTON')
'your actions'}
);
I hope this helps #cheers
I want to load whole page into my browser using ajax. I want it to look like general page navigation (like when user clicks some link).
I have a select tag, and want to navigate to appropriate page when select is selected.
I guess I have to do it with ajax,
I am trying like that:
courseSelect.on('change', function(){
var courseId = this.value;
// start search of the course by courseId
$(document).load('/courses/'+courseId+'');
});
I get my html response, but nothing happens.
Use body instead of document:
$("body").load('/courses/'+courseId);
Also I would advice you to use a container instead of loading it fully on the document.
Something like this would what I would suggest you:
$("#content").html('<img src="loading.gif" />').load('/courses/'+courseId);
I'm trying to write a very simple user content script for google.com, but the problem is that google's source code is lengthy. I want to execute code in javascript the instant that an element is in the document, but before the whole document has loaded.
Essentially, I wan't to change the source of an image before the rest of the page loads. I also want to modify html in a certain other div with a specific id. But again, I don't want to wait for the rest of the document to load before I start doing it.
How can I accomplish this? I am using jquery.
Try this:
var element = $([TagName]) || document.getElementsByTagName([TagName])[[occurance]];
function doSomething() {
// Do some magic.
}
element.addEventListener("load", doSomething, false); // Notice no brackets after the function call.
This adds an event listener to the element, and will wait until it has fully loaded until it runs the function (doSomething()).
Hope this helps.
I have this JQuery code working however I need to know whether how to actually get the URL executed from the tags selected.
$("link, script, style, a, img").each(function () {
$(this).load(function () {
// get the URL and log it
console.log("Intercepted HTTP Event");
});
});
First thing I need to do it to get the actual URL during the load.
Next thing I may need to do is to actually catch before the load event happens, I mean before an image or link is loaded for example. Also, I need to modify the URL of the event that will be executed, for example, img tag has src="/somewhere/image.png" I mean, this will cause a GET /somewhere/image.png I may need to change it to GET/otherplace/image.png
Any ideas how to achive any of these?
$(this).load() will fire after the contents of the element have been loaded. So you may be able to grab the URL by doing $(this).attr("src") or $(this).attr("href"), but it's already too late to stop the HTTP requests from going out.
AFAIK, with modern browsers, there's no way for JavaScript to prevent assets from being loaded in the first place. At best, you may be able to change images and stylesheets after the page has been loaded, by changing the src attributes. If you do this, make sure that $(this).load() doesn't go into an infinite loop. (<a> links are less of a problem. Nothing is loaded, so just change the href attribute.)
.attr('src')
http://api.jquery.com/attr/
One way to approach this problem would be to have some dummy links/hidden controls with the source of your external resource and once the page loads you go through all such controls and then create the respective html elements, update the src attribute and then append it to the dom.
Dummy Controls:
<input type="hidden" source="/my/source/a.jpg" nodeType="img" class="specialControls"/>
<input type="hidden" source="/my/source/1.js" nodeType="script" class="specialControls" />
and the javascript
$(document).ready(function()
{
$(".specialControls").each(function(){
var elementType=$(this).attr("nodeType");
$('<'+elementType+'/>').attr('src', $(this).attr("source"))
.insertAfter($(this))
});
});
Hope this helps.
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.