How to get url which starts with using jquery - javascript

How to get full url which starts url with http://sin1.g.adnxs.com
here is my code
<div id="testingurl">
<div class="ads98E6LYS20621080">
<!-- we are getting this script dynamically -->
<iframe src="http://testing.com">
if the anchor link start with http://sin1.g.adnxs.com then alert
</iframe>
<!-- we are getting this script dynamically -->
</div>
</div>

if(window.location.origin == 'http://sin1.g.adnxs.com'){
alert('some alert');
}

Use this logic
$( document ).ready(function() {
if (window.location.href.startsWith('http://sin1.g.adnxs.com')){
alert('Your message') ;
}
});

Are you looking something like this:
if (window.location.href.indexOf("http://www.sin1.g.adnxs.com") > -1) {
alert(window.location.href);
}

As other suggested, you can use window.location.origin in order to get that url
Example:
if(window.location.origin === 'http://sin1.g.adnxs.com'){
alert('alert');
}
Generally you can use window.location for:
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of current page
window.location.protocol returns the web protocol used (http:// or https://)
window.location.assign loads a new document
More info can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
EDIT:
Please have a look at the following example.
In case you have two web pages, parent.html and content.html and content.html is
displayed within parent.html using an iframe.
If you want check the URL of parent.html within content.html you can use the following script:
-------------------------- parent.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
</style>
<script>
window.name = 'parent';
</script>
</head>
<body>
PARENT
<iframe src="content.html" width="200" height="200"></iframe>
</body>
</html>
-------------------------- content.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
background-color: red;
}
</style>
<script>
app = {
start: function () {
window.name = 'content';
var parent = window.parent;
console.log(parent.name);
if (parent.location.origin === 'http://sin1.g.adnxs.com') {
alert('alert');
}
}
};
</script>
</head>
<body onload="app.start();">
CONTENT
</body>
</html>

Related

Import JavaScript tag inside script in HTML

I am making a HTML5 widget for a SCADA.
The widget generates a custom_widget.js, witch I have modified to this.
// Subscribes to receive property changes
cwidget.on("Data", function() {
var Data = document.getElementsByName("Data")
var Data.scr = cwidget.Data;
});
The custom_widget.js is called in my HTML.
And I would like to use the Data tag inside a Script, in the HTML.
What is the syntax for importing the tag in the HTML?
From the technical manual for the SCADA program, I have this example.
HTML
<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
<script src="../Resources/Apis/Proxy.js" cwidget="MyWidget"></script>
<script src="./custom_widget.js"></script>
<title>MyWidget</title>
</head>
<body>
<iframe id="myFrame" style="width: 100vw; height: 100vh;"></iframe>
</body>
</html>
custom_widget.js
cwidget.on("URL", function() {
var myFrame = document.getElementById("myFrame");
myFrame.onload = cwidget.dispatchEvent("PageLoaded");
myFrame.src = cwidget.URL;
});

Change href of Link

I have written a script which should change a Link by clicking on an element. But it doesn't work. Can anyone help me out?
<!DOCTYPE html>
<html>
<h2 id="http://www.google.com" onclick="changeLink(google);" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink(yahoo);" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink(duckduckgo);" name="duckduckgo">DuckDuckGo</h2 >
LINK //should change the href after click on google, yahoo etc.
<script>
function changeLink(x){
document.getElementById('link').href=document.getElementsByName(x)[0].id;
}
</script>
</body>
</html>
Instead of using the string represents the name as the function argument, you're currently using undefined variables.
You have the change your HTML as such:
<h2 id="http://www.google.com" onclick="changeLink('google');" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink('yahoo');" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink('duckduckgo');" name="duckduckgo">DuckDuckGo</h2 >
(Mind the single quotes)
This is the most efficient way to achieve it and best performance wise by declaring a static JSON object to initialize the values.
Here is the JSFiddle Demo
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
h2:hover{
color: blue;
cursor: pointer;
}
</style>
<script>
//JSON OBJECT LOADED ON DOC INIT
var sites = {
"google": "http://www.google.com",
"yahoo": "http://www.yahoo.com",
"duck": "http://www.duckduckgo.com"
};
function changeLink(site){
document.getElementById("target").href = site;
document.getElementById("target").innerHTML = site;
}
</script>
</head>
<body>
<h2 onclick="changeLink(sites.google);">Google</h2>
<h2 onclick="changeLink(sites.yahoo);">Yahoo</h2>
<h2 onclick="changeLink(sites.duck);">DuckDuckGo</h2>
http://www.example.com
</body>
</html>

Closing an iFrame via Javascript

I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.

Open a new page in a new window, print it and closed it

I still can't get this code to work, I am trying to use the "onClick" to swap the image once clicked, open this new page in a new window, print this new opened window and closed it. It opens the new page on the new window, but it prints a blank page and it cant close it, it seems that the focus is not been set somehow. Can any one help me on tis? Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print it</title>
<!--style type="text/css" media="print"> .noprint {visibility: hidden;} </style-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<script type="text/javascript">
// <!--
Popup = {
init : function () {
$('a.action_print').bind('click', Popup.printIt);
},
printIt : function () {
var win = window.open('doc1.html','Printed','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250');
if (win) {
win.document.close();
win.focus();
win.print();
}
return false;
}
}
$(document).ready(function () {
Popup.init();
});
// -->
</script>
</head>
<body>
<br>
CLick to Print:<br><br>
<p style=" padding: 125px 0; text-align: center;">
<a class="action_print" target="Printed"><img src="images/cam_off.png" class="img-swap" width="100" height="100" /></a>
</p>
</body>
</html>
Thanks for looking!
I figured it out, all works, I just had to make sure that my files I am printing leave in the same domain. I hope it can help others in need for such a thing, but any improvements on the code are welcome.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Open n Print</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
function openPrintWindow(url, name, specs) {
var printWindow = window.open(url, name, specs);
var printAndClose = function () {
if (printWindow.document.readyState == 'complete') {
clearInterval(sched);
printWindow.print();
printWindow.close();
}
}
var sched = setInterval(printAndClose, 200);
};
jQuery(document).ready(function ($) {
$(".test").on("click", function (e) {
var myUrl = $(this).attr('data-url');
alert(myUrl);
e.preventDefault();
openPrintWindow(myUrl, "to_print", "width=700,height=400,_blank");
});
});
});//]]>
</script>
</head>
<body>
</br>
<a class="test" href="javascript:;" data-url= "doc.html">open print and close doc</a>
<br />
</body>
</html>
The printIt looks weird. At first you close the document, then try to print the content. Try this:
if (win) {
win.focus();
win.print();
win.close();
}
Closing document won't close window, hence win.close(). Notice also the line order.
Also, jQuery 1.4 is quite old, have you considered to update to a newer version?
You may put your javascript/JQuery code in the place where I put the window.print();
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg", "window.print();", true);
To let the full content of the window load properly, change the
printWindow.close()
to
printWindow.onfocus=function(){ printWindow.close();}
See Close window automatically after printing dialog closes

get the id of the image from another html file using javascript

I using iframe for displaying a image. Here is my code.
index.html
<html>
<head>
<title>Center</title
<script type="text/javascript">
function sample(id){
var frameht=document.getElementById("ifrm").style.height;
var framewd=document.getElementById("ifrm").style.width;
}
</script>
</head>
<body>
<iframe style="width:700px;height:600px;" src="test.html" id="ifrm" onload="javascript:sample(this.id);"></iframe>
</body>
</html>
test.html
<html>
<head>
<title>Center</title>
<script type="text/javascript">
</script>
</head>
<body>
<img src="14.jpg" id="img1" onload="javascript:sample();"/>
</body>
</html>
I want the id of the image in index.html. Is it possible to get? Any one can help? Please!
document.getElementById('ifrm').contentWindow.document.getElementById('img1');
this should work
img = document.getElementById('ifrm').contentWindow.document.getElementsByTagName('img');
img[0].id to get the dinamically id
First get iframe.
var iframe = document.getElementById('ifrm');
Get access to elements of iframe.
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
Then, get id by tagname. In our case img.
var el = frameDoc.getElementsByTagName('img')[0].id;
Here is an example without iframe, to give you an idea how to get id of element after:
http://jsfiddle.net/nukec/eymq2/
Insted of id use name and try this..
<script>
window.frames["fName"].document.getElementById("img1");
</script>
<iframe style="width:700px;height:600px;" src="test.htm" id="ifrm" name="fName" onload="javascript:sample(this.id);"></iframe>
You should use jQuery
var imageObj= $('#myiframe').contents().find('img');
var imgId=$(imageObj).attr("id");

Categories

Resources