I have a problem of being unable to access data contained in the object corresponding to an <object>-html element which is used to display another website. The use-case scenario is that I want to display external website within my page and I want to know on which links users click (within this integrated external website)
Specifically, I am interested in the URL or in the name of the document. When I try to get this data (which I can see when I browse through the object using firebug) I am unable to do it. Somehow access is restricted or I do something wrong.
Here is exactly what I am doing.
1) I define an object with a wikipedia article as a data source
<object id='wikiframe' data='http://en.wikipedia.org/wiki/thing' width='100%' height='700px'> Error: Embedded data could not be displayed. </object>
2) I define a click event for the document in order to know when user clicks
$(function() {
document.onclick = myClickHandler;
function myClickHandler() {
// Please help to assign a string with the wikipedia article name or with the string of url of the link which was clicked to the variable articleName;
var articleName;
var wikiObject = $("#wikiframe");
alert('The name of the currenttly opened wiki article is: ' + articleName);
}
});
Now here are the problems:
1) If I click within the article, click event does not fire.
2) I cannot access the data contained in the object corresponding to this element. But there is information I need in it as you see on the screenshot.
On the screenshot you see a wikipedia article which was opened by clicking on a link within the article which was first displayed. Firebug displays the information I need (in this case the URL to the article "Noumenon"
Link to image displaying the properties I want to access http://img856.imageshack.us/img856/3217/informationcontainedino.png
Can you please help by telling me what I need to add in order to assign articleName a string with the url of the clicked link.
The whole code is here:
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
If you click anywhere except the object click event fires. If you click on object it does not. I want the click event firing on clicking within wiki article and showing either a) the name of currently opened article OR b) the url of the clicked link
<object id='wikiframe' data='http://en.wikipedia.org/wiki/thing' width='100%' height='700px'> Error: Embedded data could not be displayed. </object>
</body>
<script>
$(function() {
document.onclick = myClickHandler;
function myClickHandler() {
// Please help to assign a string with the wikipedia article name to the variable articleName;
var articleName;
var wikiObject = $("#wikiframe");
alert('The name of the currenttly opened wiki article is: ' + articleName);
}
});
</script>
</html>
Related
Here is the thing - I'm trying to create kind of email signature generator. Most of the index file, is a pure HTML code + tiny javascript. Inside index file I'm embeding email signature template as an iframe/email_signature.html file. So it looks as follows:
<iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="testing" name="emailSignature"></iframe>
Then I'm trying to download current content of this iframe by executing this code:
$(document).ready(function() {
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
$("#cmd").click(function(){
exportFile('new-file.html', $innerFrame.innerHTML);
});
});
but it doesn't work. Here is the example fiddle:
https://jsfiddle.net/py1tojmc/
What I'm doing wrong here?
From what I can see in the dev console opening your jsfiddle, i don't see any "event" attached to your download button.
I can't tell you why this is happening (I'm not that expert), but maybe the call to .contentWindow.document.body.innerHTML; is somehow changing the DOM context to the iframe (just a guess), and it seems you cannot access the button id #cmd anymore.
Try changing your code like this ans see if it works:
$(document).ready(function() {
$("#cmd").click(function(){
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
exportFile('new-file.html', $innerFrame.innerHTML);
});
});
Yeah looks like the button event won't fire. But could be cross origin security:
SecurityError: Permission denied to access property "document" on cross-origin object
But that could just be the jsfiddle, can you put an alert('cmd button works'); just to make sure your button fires?
I want the user to be able to open the website and there will be a prompt that will ask the user to tell them about themselves and the text they input display in a new window?
<html>
<head>
<script>
var text = prompt("Tell us something about yourself ");
function newWindow() {
var OpenWindow = window.open("", "slayyyter", "height=300 , width=300");
}
function showText() {
OpenWindow.document.write(text);
}
</script>
</head>
<body>
<button onclick="showText()">A</button>
</body>
</html>
The code has three errors in it. Open the web console (typically by pressing F12) to see messages for some of them.
The prompt string
"Tell us something about
yourself"
has a line feed in it that needs to be removed,
The variable OpenWindow declared in newWindow is not in scope of the code inside showText. If declaring OpenWindow globally, remove var before the variable name inside newWindow to prevent the global variable being shadowed by a local declaration.
newWindow needs to be called
Here's an example that returns the window object instead of saving it in a global variable:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Test</title>
<head>
<script>
"use strict";
var text = prompt("Tell us something about yourself");
function newWindow() {
return window.open("", "slayyyter",
"height=300 , width=300");
}
function showText() {
var openWindow = newWindow();
newWindow().document.write(text);
newWindow.close();
}
</script>
</head>
<body>
<button onclick="showText()"> A </button>
</body>
</html>
Note
document.write is useful for learning exercises in JavaScript, but call document.close to finalize a document after writing to it - it stops the window loading indicator in opened windows.
Seach on "HTML5 document type declaration", "Declaring the character set in HTML" and "when to use strict mode in JavaScript" for more information.
You'll want to use your browser's tools and JavaScript console, which on button click says that OpenWindow is not defined. This is because of scope. OpenWindow only exists where you define it - inside function newWindow. To access it in other functions declare it outside (right under var text will do). You can leave it defined but blank, then assign it later. So under the declaration of "text" just put var OpenWindow;. Then inside newWindow delete "var" from in front of OpenWindow. You may have other issues as I have not tested the code, but that's the main one.
Hints:
read up on scope
read up on browser debug tools, especially JS console
do your tutorials in http://jsfiddle.net or something similar, and you can share examples here when you ask for help.
I'm afraid what you want to achieve isn't doable that easily because there is no direct way to tell the new browser window what you have written in the first window.
You can do it like this however.
Prompt to enter some text
Save the entered text into the browser's localstorage.
Open the same html page using window.open() but append a query string to the url e.g. ?id=new
Make a distinction via code if the site was called with or without a query string. If there's no query string show the prompt dialog, if there is a query string get the text from the localStorage and write it to the browser window.
Use this snippet and save it as test.html
<html>
<head>
<script type="text/javascript">
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('id') == null) {
var text = prompt("Tell us something about yourself");
localStorage.setItem('myText', text);
window.open("test.html?id=new", "slayyyter");
} else {
document.write("You have written: " + localStorage.getItem('myText'));
}
</script>
</head>
</html>
As a side note - window.open() accepts an url as the first parameter. You can't simply enter some text or pass a string containing text - it must be a valid resource e.h. an image, a html file, php,...
I want to do masking of two images.
one image is predefined and second image is uploaded by user, I want to mask these two images in separate new window.
I am stuck here-
I am able to open one image in new window on click event(JQuery - On Click image open separate window). but not able to open two images.
Please guide me how can I open two images on button click event in separate new window or tab
My code-
<a id="largeImage" onClick="swipe()">mask</a>
<script>
function swipe() {
var url = "test1.jpg";
window.open(url,'Image','_blank','','');
}
</script>
when I am using
<script>
function swipe() {
var url = "test1.jpg";
var url1 = "test2.jpg";
window.open(url,'Image','_blank','','');
window.open(url1,'Image','_blank','','');
}
</script>
it is opening only second image(test2 image overriding test1 image)
If you try something in event handler -
window.open(URL1,'_blank','','');
window.open(URL2,'_blank','','');
Actually you can't open two windows in single instinct.
You should also know that window.open is sometimes blocked by popup blockers or by ad-filters.
instead you can use the iframe to acheive similiar thing.
here frame allows you to open multiple pages.
<html>
<head>
</head>
<body>
<a onclick="swipe()"></a>
<iframe name="frame-1"></iframe>
<iframe name="frame-2"></iframe>
<script>
function swipe() {
var url = "test1.jpg";
var url1 = "test2.jpg";
window.open(url,'frame-1');
window.open(url1,'frame-2');
}
</script>
</body>
You can try this fiddle I found:
You can append to body compiled element with binding, something like
$compile('<div>{{var}}</div>')($scope)
or you can add html to body itself and compile it
$compile(angular.element($scope.window.document.body).html('{{var}}'))($scope);
Sample JSFiddle
Here's the link of source: AngularJS: open new window and maintain two-way data binding
Let's say I have an embedded web page on a website (Example: www.en.wikipedia.org/wiki/Pulsar). The user than clicks on a hyperlink inside the article (Ex:
https://en.wikipedia.org/wiki/Extrasolar_planet).
I want to have a frame which displays the name of the article (in this case, "Extrasolar planet") when the user clicks an entry from the original article ("Pulsar")
How do I know what the user has clicked?
EDIT: After seeing many examples, I tried to do this instead, but it doesn't quite work.
<iframe width="940" height="550" src="http://en.wikipedia.org/wiki/Special:Random"> </iframe>
<script>
(document.getElementsByTagName('iframe').contentWindow.document).keydown = function() {
alert("Hello World")
})
</script>
This doens't work because you're using getElementsByTagName which returns an array. Use getElementById or getElementsByTagName('iframe')[0] instead.
contentWindow is the iframe's window object. Here you want the iframe's document:
$(document.getElementById('iframe_id').contentWindow.document).keydown(function() {
// my func
});
OR
$(document.getElementById('iframe_id').contentWindow.document).click(function() {
// my func
});
Sorry, I'm don't know the right terminology to look this up by keyword...
So, as a simple newbie exercise, I tried to make a file "test.html" (just on my desktop) such that when I load it my browser and click the button that appears on the page, the article count from Wikipedia's main page will appear on the page under the button.
Somebody told me to try using an iframe, and I came up with this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"">
function get_count(){
var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
document.getElementById("put_number_here").innerHTML = articlecount;
}
</script>
</head>
<body>
<iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
<input type="button" onclick="get_count()" />
<p id="put_number_here"><p>
</body>
</html>
It doesn't work, and when I test this in the scratchpad (using Firefox 17), I get this:
var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
#Scratchpad:10
*/
(And alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); works perfectly on http://en.wikipedia.org/wiki/Main_Page directly, so I know that's not the problem. Copying the source of the wikipedia main page to a new file "test2.html", and setting that as the src of the iframe, that also works.)
Am I just trying to do this in completely the wrong way?
You cannot access any elements inside an iFrame unless, the iFrame is referring the same domain.
for same domain calls, use this link for reference :
Calling a parent window function from an iframe
for different domain, user this link for reference :
How do I implement Cross Domain URL Access from an Iframe using Javascript? script
You can reference the other frame by using:
window.frames["wiki_page"]
Then you can reference the element in the DOM by using:
window.frames["wiki_page"].document.getElementById ("articlecount");
So in your case you could try:
var targetFrame = window.frames["wiki_page"];
Then Access the elements using:
targetFrame.document.getElementById("IDOfSomething");
Make sure your iframe is still named wiki_page etc...