CODEWITHSUNDEEP
javascriptjqueryhtml
pet4 RX
pet4 RX

Reputation: 61

How to set real time input value to link through iFrame?

Please see below 2 HTML pages, I have 1 page inside iFrame call other page. what I exactly need, I want in "iframe.html" you can see text field. when I write something in that input box, real time that value should take inside href=""

Note : iframe.html page is pure html page. I can't use jquery inside that page. I have to access that page from index.html page.

I have tried some jquery code, but only I wrote function.

this is index.html page.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <iframe src="iframe.html" id="myframe"></iframe>

    <script type="text/javascript">
    $($("#myframe").contents().find('body')).on("click", 'a[href="#editable-link"]', function(e) {

    });
    </script>
</body>
</html>

And this is "iframe.html" page.

<html>
<head>
    <input type="text" placeholder="Enter URL">
    <a href="" id="editable-link">Read More</a>
</body>
</html>

can anyone help me to resolve this problem. it will very helpful. thanks in advance.

Upvotes: 2

Views: 684

Answers (1)

Josh
Josh

Reputation: 332

Try 

$('#myframe').load(function(){
  $('#myframe').contents().find('input').bind('input',function(e) {
      var url = $('#myframe').contents().find('input').val();
      $('#myframe').contents().find('#editable-link').prop('href',url);
   });
});

Upvotes: 1

Related Questions