I am trying to create a bookmarklet functionality similar to the thefancy.com site, I created a bookmarklet button which when clicked loads a js file which is located on some other website http://wonderstreet.localhost.com and append it in the head section of the current document, it then creates a iframe and append it in the body of the current document.
The above mentioned js file contains various functions which I need to call from this iframe, for example, there is a "Close" button in the iframe which when clicked should call the function which is located in the above js file (this function will close or remove the iframe)
The iframe gets created and displayed correctly.(I need to fetch all the images of current document and show it in iframe)
Problem is that when I click close button it says: ReferenceError: function is not defined
Can somebody please help and let me know how can I solve this ?
[I am using core javascript and not jquery]
Here is the code from the js file =>
function create_bookmarklet_iframe(thewonderstreet_userid) {
var ifra=document.createElement('iframe');ifra.src="http://localhost.com/index.php/image_picker?userid="+userid;ifra.setAttribute("id","bookmarklet_iframe");ifra.setAttribute('allowtransparency',true);ifra.setAttribute('style','width:279px;height:372px;border:1px solid #4c515c;position:fixed;top:10px;right:10px;z-index:10000001;margin:0;background-color:#eff1f7;');void(document.body.appendChild(ifra));
}
function remove_bookmarklet_iframe(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
}
And this is the bookmarklet code:
javascript:%20(function%20()%20{%20%20%20%20%20userid%20=%20'724c5a0e49e4dac588a90e17233982493027197d';%20%20%20%20%20var%20search_url%20=%20'http://localhost.com/javascript/bookmarklet_js.js';%20scripts_finder%20=%20document.getElementsByTagName('script');%20var%20found_url%20=%200;%20for%20(var%20i%20=%20scripts_finder.length;%20i--;)%20{%20var%20actual_url%20=%20scripts_finder[i].src.split("?");%20if%20(search_url%20==%20actual_url[0])%20{%20found_url++;%20}%20}%20if(found_url%20<=%200)%20{%20s=document.createElement('SCRIPT');s.type='text/javascript';s.src='http://localhost.com/javascript/bookmarklet_js.js?_='+(Math.random());document.getElementsByTagName('head')[0].appendChild(s);%20}%20%20var%20s_id%20=%20'bookmarklet_iframe',%20%20%20%20%20%20%20%20%20s_avail%20=%20document.getElementById(s_id),%20%20%20%20%20%20%20%20%20can_continue%20=%20true,%20%20%20%20%20%20%20%20%20t;%20%20%20%20%20if%20(s_avail)%20{%20%20%20%20%20%20%20%20%20can_continue%20=%20false;%20%20%20%20%20%20%20%20%20alert('Alreadyopen');%20%20%20%20%20}%20%20%20%20%20setTimeout(function()%20{%20if%20(can_continue)%20{%20create_bookmarklet_iframe(userid);%20}%20},1000);%20})();
Ok, I solved it myself, what I was doing was wrong, instead of creating an iframe I used div, so basically I eliminated iframe, created div by javascript and appended it to document body.
Related
Imagine the situation, where I have an iframe of a website.
Inside that website there is a button in which I want to click via javascript.
After looking into the HTML of the website, I noticed that the button is actually a div, with class like.
So I tried this:
function likeFunction()
{
var iframe = document.getElementById("myFrame");
var elmnt = iframe.contentWindow.document.getElementsByTagName("div")[10];
elmnt.click();
}
or
function likeFunction()
{
var iframe = document.getElementById("myFrame");
iframe.contentWindow.document.getElementsByTagName("div")[10].click();
}
and my final attempt was giving that div an ID='ex'
function likeFunction()
{
var iframe = document.getElementById("myFrame");
iframe.contentWindow.document.getElementById("ex").click();
}
But in the end, nothing really did it for me, any ideas?
Thanks in advance!
Your solution should work, as long as the iFrame is on the same domain. If it is not, you should get an error on this line
iframe.contentWindow.document.getElementsByTagName("div")[10].click();
So you would probably have noticed.
My only thoughts are:
you might be using the wrong selector,
you might be running the posted script on the iframe itself, not on the parent scope
you might be running this before the iFrame is loaded. Maybe running this onDocumentComplete on the parent document or some other way.
The click listener might be on on different element than the one you are progamatically clicking on.
But in the scenarios I mentioned, you should be getting an error, which you didn't mention.
Otherwise, the general approach works on my tests.
So, I'm having an issue where I want to disable right click at a website loaded in my website in a HTML Object tag, as explained here How to add eventlistener to object in Html Object Tag?, I found this google extension (Enable right click) which does the opposite of what I want.
Reading all the code and analizing what it does, I found out that when a site is loaded, it appends a script to the document body, which enables right clicking catching the contextmenu event and stopping the propagation or something like that, it works.
So I just added the script to my website and it didn't work on the website loaded inside the HTML Object tag, it works everywhere else. BUT when using the extension it did work in the website loaded inside the HTML Object tag.
So I made several tests and debugging, and found out that when website is loaded inside the HTML Object tag, the extension ALSO appends the script inside its body, take for example this simple code (very similar to the one used on my previous post):
<html lang="en">
<head>
<script>
function fill(){
document.addEventListener('contextmenu', handleEvent, true);
}
function handleEvent (event) {
alert("working");
}
</script>
</head>
<body>
<button type="button" id="fill" onclick="fill()">Fill</button>
<object id='miobj' style="width:800px;height:600px;" data="http://validator.w3.org/" />
</body>
</html>
I include my script in the html, but what the extension does is to append the script through a content script(which I don't really know when it is fired):
var scp = document.createElement('script');
scp.src = chrome.extension.getURL('web_accessible_resources/index.js');
document.body.appendChild(scp);
function postWebAccessibleResourceMessage (flag) {
window.postMessage({
'type': 'enable-right-click',
'disableRightClick': flag
}, '*');
}
So, with the extension enabled, it appends its script (web_accessible_resources/index.js) to the body, but it also appends it to the body inside the HTML Object tag.
Obviously the extension has a few more scripts, but the principle remains, so if I could append a script to the body in the website loaded inside the HTML Object tag, I could accomplish what I want to do.
Any ideas how could I append my script to the website loaded inside the HTML Object tag?
EDIT:
If you can't do this due to same origin policy, why is a chrome extension able to do it?
I am using ImageFlow 9. I have an ImageFlow scroller script added in the Iframe. I want to have the images opened outside the iframe that is on the Parent page. Right now it is opening the images in the Iframe itself. What changes should I do and in which file?
There is a .js file that has a function as below -
image.onclick = function() { document.location = this.url; }
Do I need to make the changes here or in the actual script that uses this code-
<img src="reflect.php?img=img/large1.jpg" longdesc="javascript:myLightbox.start('img/large1.jpg|Image 1');" alt="Image 1" />
Create a JavaScript function on the parent page, and call that from the iFrame.
Something like
function openImage(url){
// do your image handling stuff here
}
From the iFrame call the function:
parent.openImage(url);
ps: I recommend not using iFrames at all unless there is no other way (which most of the time is not the case)
Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });
I have a page on my site which has a blank text field. Next to this is a button which opens up an iframe (using colorbox). This iframe shows a list of files - next to each file is a button which puts the filename in to the text field in the parent window by calling the function below:
function returnImage(file){
$('#input_text_id', window.parent.document).val(file);
parent.$.fn.colorbox.close();
}
This works great, however a problem arises when I click a folder in the iframe. This causes the page in the iframe to load a different page of files. After this, the function no longer works.
Is there anyway that I can use jquery to access the very top parent page and control that? So we would have something like:
function returnImage(file){
$('#input_text_id', theoriginalwindow.document).val(file);
parent.$.fn.colorbox.close();
}
Hope this makes sense, if you require more info, please let me know.
Thanks
In top window:
<script>
function returnImage(file, doc){
$('#input_text_id', doc).val(file);
$.fn.colorbox.close();
}
</script>
From iframe:
<script>
top.returnImage(file, document); // top is top parent window.
</script>
Use top.