How to put domain name before relative link in JavaScript Dom? - javascript

I have this page
<html>
<body>
<script>
document.domain = "yandex.ru";
</script>
video
</body>
</html>
Sadly, still have link in HTML like /video, instead of yandex.ru/video.
P.S.: links are relative type and don't depends from myself. In certain cases (not all though) - they are incorparated in iframes.

Related

HTML link does not open in target frame

Recently I have been asked for help with a set of HTML pages, that failed to work as expected. The setup consisted of a frameset, where links shown in some frame should open in some other frame. This should be accomplished by the target attribute on the anchor element, or a base element with a target attribute in the page containing the link.
The problem was that links did not open in the desired target frame, but in a different tab.
After some analysis, I found out that this behavior was caused by the presence of a Javascript variable "name", which was present on the page that was initially loaded in the target frame. If the value of that variable did not match the name of the target frame, the link opened on a new tab. In case it matched the target frame name, the link opened in the target frame, as expected.
This happens consistently in recent versions of at least three browsers (tried Firefox, Chrome, and Edge).
I would like to know why it works this way.
Here is a small reproduction of the issue (also available here), with a frameset, three frames with initial content, and two links. The first link, with target="two", opens in frame "two". But the second link, with target="three", does not open in frame "three", instead it opens in a new tab. Apparently this depends on the value of Javascript variable "name" in the initial content of that frame, three.html. But why?
index.html:
<html>
<frameset rows="33%,33%,*">
<frame name="one" src="one.html">
<frame name="two" src="two.html">
<frame name="three" src="three.html">
</frameset>
</html>
one.html:
<html>
<body>
frame "one"
<br>
<a target="two" href="content.html">show content (target="two")</a>
<br>
<a target="three" href="content.html">show content (target="three")</a>
</body>
</html>
two.html:
<html>
<body>
frame "two"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
three.html:
<html>
<body>
frame "three"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
content.html:
<html>
<body>
content
</body>
</html>
The reason for this is that by setting the variable name in the pages, you are overriding the Window.name variable.
And that Window.name variable is what the system uses to determine the Frame's name. When you override this value and change it, and then try to reach the frame with the older value, then you are redirected to a new tab.
HTML file when targeted with link name specified in the frame tag does not open in that named frame. The problem is the frame where it is loaded is calling the other frame to load a new html file does not recognise the name or it can't find where the named frame as specified in the frameset orderly as per syntax. There is no mistake in naming the calling frame. The link opens in itself in its own frame where the html document is calling. It means it opens in the same window frame as _SELF is being executed. The calling frame with its HTML file and primararily the code the anchor tag can't see the window frame I am calling to load the desired HTML file and can't recognise the name I have given to the calling frame.
How to solve.....the first para problem. ?
I reiterate there is nothing wrong in the browser. I have the best app browser line-ups. All execute work fine with all web pages.
Ross

Using javascript for an off-server page-dynamic links

I have the HTML and CSS down the pat, but I'm needing some javascript to tie this all together.
I have a page 'static.html' that does not exist on a server, but rather a local filesystem.
This file has a div layout with 2 lists of names/titles/etc. along with a CSS stylesheet to style all the static pages.
The page also uses an inline media player. These pages are designed to be used offline, off-server, and thus have very limited functionality.
I would like to change the lists to a href= links to other static pages, however not all the titles/names in the list have pages currently, or may not need them.
Is there a way that I can use some javascript to check if the href="./linkedpage.html" exists and then turn on/off the link on page load.
I can create one parent page that references 30 other pages, and as I add the new pages, the links can become active within the parent.
Ideally, this script can be loaded on every page to check the links' source to be present or not, and enable/disable the anchor tag.
Thanks a bunch,
-Tim
EDIT: PS. the href links will be images and text.
Edit: Working progress Code:
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
I have a page1.html in the same directory, but no page2.html...both links return 0. Debugger returns "Error: Incorrect contents fetched, please reload."
Revised, for testing...
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
Now it does nothing.

How to get all nested iframes on document?

I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.
I have the following HTML structure (simplified) :
<html>
<head>
</head>
<body style="">
<div>
<div>
<div>
<iframe>
<html>
<head></head>
<body>
<div></div>
<iframe>
<html>
<head></head>
<body>
<div>
<iframe src="about:blank">
<html>
<head></head>
<body>
<img />
<iframe id="some_random_id">
<html>
<head></head>
<body>
<div>
<!-- main content -->
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
And I would like to retrieve all the iframes, ideally in an array.
I have tried the following:
document.getElementsByTagName('iframe')
But that returns an array of size 1 : [iframe]
window.frames.length give me 1
I thought about doing something like :
var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0]
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined
Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.
Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up
because the accepted answer in this question use:
for( j=0; j<m; j++) {
...
}
Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.
You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:
Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.
In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.
You have two possibilities to use <iframe> tag:
In the src attribute from <iframe> tag you could write a path to HTML file.
In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.
If you want find some elements or manipulate the content from this iframes you could use the following code:
var iframe = document.getElementById('iframeId'),
innerDoc = iframe.contentDocument ? iframe.contentDocument
: iframe.contentWindow.document;
You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.
If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).

Get data from iframe

I am doing this first time. I have created an iframe on my page and I want the text from the iframe through jquery.
Here is my code :
<html>
<head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function copyIframeContent(iframe){
var iframeContent = $(iframe).contents(); //alert(iframeContent);
//$("#result").text("Hello World");
$("#result").html(iframeContent.find('body').html);alert(iframeContent.find('body').html());
}
</script>
</head>
<body>
<iframe id="myIframe" onload="copyIframeContent(this);" name="myIframe" src="text.php"></iframe><br />
Result:<br />
<textarea id='result'></textarea>
<input type="button" value="click" id="btn" onclick="aa()">
<script type="text/javascript">
function aa(){ alert("Fdf");
alert(document.getElementById('myIframe').contentWindow.document.body.innerHTML);
}
</script>
</body>
</html>
text.php:
text to change
I tried a lot in all browsers but still this is not working.
Can anyone help me to get this content?
The contentWindow works in both FF and chrome
document.getElementById('myFrame').contentWindow.document.body
Would give you a DOM element body
You can also try something like
window.frames['myIframe'].document.body
That might do the trick for you also
You might have problems with your browsers built in security. If you run this on a local machine. There is a way to disable browsers security.
var content=$("iframe").contents().find('body').html();
alert(content);
Use .contents() to get to iFrame's DOM.
$('#myIframe').contents()
UPDATE:
In the OP:
$("#result").html(iframeContent.find('body').html);
Should say:
$("#result").html(iframeContent.find('body').html());
Doing with jquery will be a little easier:
$('Your Selector', frames['myIframe'].document)
The above example will get anything from myIframe. But the iframe MUST be from the same domain as the parent document. If not from the same domain, a security violation occurs (You can't add content from foreign sites to your page and change that content.)
If no security violation, you can do anything with the selection. For example you can use the jquery append() method to insert new html inside the iFrame, you can use the html() method to replace html or any other function that jquery/pure javascript allows.

Accessing IFrame elment from external page loaded inside iFrame

I would like access the IFrame element available in the main page from the IFrame source page using JavaScript
Here is my main Page
<html>
<body>
<IFrame id="page-container" src="http://stackoverflow.com"
width="200px" height="200px">
</IFrame>
</body>
</html>
Child Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"/>
<script type="text/javascript" >
$(document).ready(function(){
var containerFrame= $('#page-container');
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.parent.frames["page-container"];
});
</script>
<body>
<div>some content..</div>
</body>
</html>
I am getting undefined for all my tries.
How it can be done? Is it possible?
Edit: I tried loading a cross domain page.
In IE i am getting error ' for security reason framing is not allowed' and also
domains, protocols and port must match. Can we achieve this any way?
var containerFrame = $('#page-container', window.parent.document)
This should firstly reference the parent of the window and then look for the iframe div
You need to specify the context to search for #page-container in, which in this case will be the parent window.
var containerFrame = $('#page-container', window.parent.document);

Categories